angular2-simple-ui/sui/sui.table/sui.table.component.html

Angular 2 Simple Material Design UI Components customisable with Simple 30 KB CSS with LESS support and full features support , just plugin up and run for clarity look at sample examples

<div class="sui-margin-top">
    <sui-alert [message]="errorMessage" [type]="alertType" heading="Error !"> </sui-alert>
    <div class="{{' sui-table-container '+ tableModel.cssTableContainerClass}}" [ngStyle]="tableModel.tableContainerstyle">
        <h2 *ngIf="tableModel.tableHeader" [ngClass]="tableModel.cssTableHeader" [ngStyle]="tableModel.styleTableHeader"> {{tableModel.tableHeader}} </h2>
        <div class="sui-margin-bottom">
            <div class="sui-left sui-inline-flex">
                <span class="sui-margin-left sui-margin-right sui-margin-top-10 "> <span *ngIf="tableData && tableData.length"> {{tableData.length}} </span>                items </span>
                <input class="{{ ' sui-input-inline sui-margin-right  ' + tableModel.cssSearchInputClass}}" *ngIf="tableModel.enableQuickFilterBy"
                    placeholder="{{tableModel.searchInputPlaceholderText}}" type="text" (keyup)="onFilterChange($event,'search')">                <span class="sui-search-right sui-margin-right">  <i class="fa fa-search"></i> </span>
                <span class="sui-margin-left" *ngIf="columns && columns.length"> 
                <span class="sui-inline-flex"  *ngFor="let column of columns;let in=index;trackBy:trackByIndex">
                <span *ngIf="column.showInQuickFilter" class="sui-margin-top-10 sui-margin-right" > {{column.displayName}} </span>
                <input class="sui-input-inline sui-margin-right" placeholder="{{'Filter By ' + column.displayName}}" *ngIf="column.showInQuickFilter && column.fieldType!=5 && column.fieldType!=4"
                    [type]="getType(column.fieldType)" (change)="onFilterChange($event,column)">
                <select class="sui-select" *ngIf=" column.showInQuickFilter && (column.fieldType==5 || column.fieldType==4)" (change)="onFilterChange($event,column)"> 
                 <option *ngFor="let item of getSelectList(column);let in=index;trackBy:trackByIndex" [value]="item.key">{{item.value}}</option>
                </select>
                </span>
                </span>
                <sui-button *ngFor="let btn of tableModel.tableCustomActionButtons" (onClick)="onActionButtonClick(btn.id,null)" [model]="btn">
                </sui-button>
                <sui-button class="sui-margin-right" *ngIf="tableModel.canAdd" (onClick)="onEditRow()" [model]="tableModel.addBtn"> </sui-button>
                <sui-button class="sui-margin-right" *ngIf="tableModel.canRefresh" (onClick)="onRefresh()" [model]="tableModel.refreshBtn"></sui-button>
                <sui-button class="sui-margin-right" *ngIf="tableModel.canColumnChoose" (onClick)="showColumnsToChoose=!showColumnsToChoose"
                    [model]="tableModel.columChooserBtn"></sui-button>
                <div *ngIf="showColumnsToChoose" class="sui-border sui-column-chooser-panel">
                    <div class="sui-block" *ngFor="let column of columns;let in=index;trackBy:trackByIndex">
                        <a (click)="onColumnChooserClick(column)" class="sui-pointer sui-padding sui-margin">
                            <i *ngIf="showColumnIcon(column)" class="fa fa-check"> </i> {{column.displayName}}
                        </a>
                    </div>
                </div>

                <sui-pagination *ngIf="tableData && tableData.length && tableModel.paginingControlPosition==1" [paginationModel]="tableModel.pagination"
                    [totalRecords]="tableData.length" (pageSizeChange)="onpageSizeChange($event)" (pageClick)="onPageClick($event)">
                </sui-pagination>
            </div>
            <div class="sui-right sui-inline-flex">
                <div class="sui-right">
                    <sui-pagination *ngIf="tableData && tableData.length && tableModel.paginingControlPosition==0" [paginationModel]="tableModel.pagination"
                        [totalRecords]="tableData.length" (pageSizeChange)="onpageSizeChange($event)" (pageClick)="onPageClick($event)">
                    </sui-pagination>
                </div>
            </div>
        </div>
        <table class="{{'sui-margin-top '+ tableModel.cssClass}}" [ngStyle]="tableModel.style">
            <thead>
                <tr>
                    <th *ngFor="let column of columns | visible:hiddenFields;let in=index;trackBy:trackByIndex" class="{{tableModel.cssHeaderClass}}"
                        [ngStyle]="tableModel.styleHeader">
                        <span (click)="onSortClick(column)" class="sui-pointer sui-left">
                            <span class="{{tableModel.cssSortIcon}}" *ngIf="column.canSort" [ngStyle]="tableModel.styleSortIcon"> 
                                        <i class="{{'sui-icon-width '+sortedIcon}}" *ngIf="sortKey == column.fieldName"> </i>
                                        <i class="{{'sui-icon-width '+tableModel.sortIcon}}" *ngIf="sortKey != column.fieldName"> </i>
                            </span>

                        </span>
                        <span class="{{'sui-pointer sui-margin-left-5' +tableModel.cssHeaderText}}" (click)="onSortClick(column)" [ngStyle]="tableModel.styleHeaderText">
                                {{column.displayName}}
                        </span>
                        <span (click)=" onFilterMenuClick(column)" class=" sui-pointer sui-margin-left  sui-margin-right sui-icon-width">
                                <i class="{{'sui-icon-width '+ column.icon}}"> </i> 
                        </span>
                        <div *ngIf="filterPanelField && column.fieldName==filterPanelField" class="sui-filter-panel">
                            <div class="sui-margin">
                                <input (keyup)="onFilterMenuSearchChange($event,column)" [(ngModel)]="column.filtedMenuValue" class="sui-input-inline sui-width-100  sui-border sui-margin-0"
                                    *ngIf="column.fieldType!=5 && column.fieldType!=4" type="search">
                                <span class="sui-search-right ">  <i class="fa fa-search"></i> </span>
                            </div>
                            <div *ngFor="let item of getSelectList(column,false) | tableMenuFilter:tableMenuFilterModel ;let ri=index;trackBy:trackByIndex"
                                class="sui-block">
                                <div class="sui-left-align sui-margin">
                                    <input type="checkbox" [(ngModel)]="item.isSelected" (ngModelChange)="onFilterMenuCheckClick($event,column.fieldName,item,column)">                                    {{item.value}}
                                </div>
                            </div>
                        </div>

                    </th>
                    <th  *ngIf="tableModel.canEdit || tableModel.canDelete  || tableModel.rowActionButtons.length" class="{{ 'sui-border-right '+  tableModel.cssHeaderClass}}" [ngStyle]="tableModel.styleHeader"> </th>
                </tr>
                <tr *ngIf="tableModel.showFilterRow">
                    <th *ngFor="let column of columns | visible:hiddenFields;let kk=index;trackBy:trackByIndex">
                        <div *ngIf="column.canFilter">
                            <input class="{{column.cssfilterRow}}" [ngStyle]="column.styleFilterRow" *ngIf="column.fieldType!=5 && column.fieldType!=4"
                                [type]="getType(column.fieldType)" (keyup)="onFilterChange($event,column.fieldName)">
                            <select class="{{ 'sui-select ' +column.cssfilterRow}}" [ngStyle]="column.styleFilterRow" *ngIf="column.fieldType==5 || column.fieldType==4"
                                (change)="onFilterChange($event,column.fieldName)"> 
                             <option *ngFor="let item of getSelectList(column,true);let rr=index;trackBy:trackByIndex" [value]="item.key">{{item.value}}</option>
                             </select>
                        </div>
                    </th>
                    <th  *ngIf="tableModel.canEdit || tableModel.canDelete  || tableModel.rowActionButtons.length"> </th>
                </tr>

            </thead>
            <tbody *ngIf="tableData && tableData.length">
                <tr *ngFor="let row of tableData | filter : filters |orderBy:sortKey:sortOrder| pagination :currentPage:pageSize| delete:deleteIndex| add:rowToAdd ; let in=index;trackBy:trackByIndex ">
                    <td *ngFor="let k=index;trackBy:trackByIndex;let col of columns | visible:hiddenFields" [ngClass]="tableModel.cssRowCssClass"
                        [ngStyle]="tableModel.styleRow">
                        <span *ngIf="col.fieldType!==4 &&col.fieldType!==7  &&col.fieldType!==3" class="{{col.fieldType==1? 'sui-left-align sui-left':'sui-right-align sui-right'}}">{{row[col.fieldName]}}</span>
                        <span *ngIf="col.fieldType===3" class="sui-right-align sui-right">{{row[col.fieldName]| date:col.dateFormat}}</span>

                        <input class="sui-table-check" disabled type="checkbox" *ngIf="col.fieldType===4" [(ngModel)]="row[col.fieldName]" />
                        <img src="{{row[col.fieldName]}}" *ngIf="col.fieldType===7" />
                    </td>
                    <td style="text-align:center" *ngIf="tableModel.canEdit || tableModel.canDelete  || tableModel.rowActionButtons.length ">
                        <sui-button *ngIf="tableModel.canEdit" (onClick)="onEditRow(row)" [model]="tableModel.editBtn"> </sui-button>
                        <sui-button *ngIf="tableModel.canDelete" (onClick)="onDeleteRow(row)" [model]="tableModel.deleteBtn"> </sui-button>
                        <sui-button *ngFor="let btn of tableModel.rowActionButtons" (onClick)="onActionButtonClick(btn.id, row)" [model]="btn"> </sui-button>
                    </td>
                </tr>
            </tbody>
            <span *ngIf=" !showLoader && (!tableData || tableData.length<=0) " class="sui-center"> 
               No data available
            </span>
        </table>
    </div>
    <sui-progress [showSpineer]="showLoader"> </sui-progress>
    <sui-pagination *ngIf="tableData && tableData.length && tableModel.paginingControlPosition==3" [paginationModel]="tableModel.pagination"
        [totalRecords]="tableData.length" (pageSizeChange)="onpageSizeChange($event)" (pageClick)="onPageClick($event)"> </sui-pagination>
    <sui-pagination class="sui-right" *ngIf="tableData && tableData.length && tableModel.paginingControlPosition==2" [paginationModel]="tableModel.pagination"
        [totalRecords]="tableData.length" (pageSizeChange)="onpageSizeChange($event)" (pageClick)="onPageClick($event)"> </sui-pagination>

</div>

<sui-modal [(visible)]=" showDialog " headerText="{{modalHeaderText}} ">
    <sui-form [fields]="fields " (send)="saveForm($event); "> </sui-form>
</sui-modal>


<sui-confirm [(confirmMessage)]="deleteConfirmMessage " [(visible)]="confirmDelete " (response)="deleteResponse($event); ">
</sui-confirm>

<sui-form [fields]="fields " (send)="saveForm($event); " *ngIf="showForm "> </sui-form>