angular2-boiler-plate/src/app/sui/sui.table/sui.table.component.html

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

<div class="sui-margin-top">
    <sui-alert [message]="errorMessage" [type]="alertType" heading="Error !"> </sui-alert>

    <div class="sui-table-container" *ngIf="tableModel && showTable">
        <div class="sui-margin-bottom">
            <div class="sui-col s5">
                <div class="sui-margin">
                    <input class="sui-input-inline sui-border" *ngIf="tableModel.enableQuickFilterBy && tableData && tableData.length " placeholder="{{tableModel.searchInputPlaceholderText}}"
                        type="text" (keyup)="onFilterChange($event,'search')">
                    <span *ngIf="tableModel.columns && tableModel.columns.length"> 
                <span *ngFor="let column of tableModel.columns;let in=index;trackBy:trackByIndex">
                 <input class="sui-input-inline"  placeholder="{{'Filter By ' + column.displayName}}"  *ngIf="column.showInQuickFilter && column.fieldType!=5 && column.fieldType!=4" [type]="getType(column.fieldType)" (keyup)="onFilterChange($event,column.fieldName)">
                 <select class="sui-select"  *ngIf=" column.showInQuickFilter && (column.fieldType==5 || column.fieldType==4)" (change)="onFilterChange($event,column.fieldName)"> 
                 <option *ngFor="let item of getSelectList(column);let in=index;trackBy:trackByIndex" [value]="item.key">{{item.value}}</option>
                </select>
                </span>
                    </span>
                </div>
            </div>
            <div class="sui-col s2">
                <h2 [ngClass]="this.tableModel.cssTableHeader" [ngStyle]="this.tableModel.styleTableHeader"> {{tableModel.tableHeader}} </h2>
            </div>
            <div class="sui-col s5">
                <div class="sui-right sui-margin"  *ngIf="tableModel.columns && tableModel.columns.length">
                    <button *ngIf="tableModel.canAdd" (click)="onEditRow()" class="{{tableModel.cssAddBtn}}"> <i class="{{tableModel.cssAddIcon}}"> </i> {{tableModel.txtAddBtn}}  </button>

                    <div class="sui-dropdown-hover" *ngIf="tableModel.showColumnChooserButton">
                        <button class="{{tableModel.cssClassColumnChooser}}">{{tableModel.columnChooserText}}</button>
                        <div class="sui-dropdown-content sui-border">
                            <a (click)="onColumnChooserClick(column)" class="sui-pointer" *ngFor="let column of tableModel.columns;let in=index;trackBy:trackByIndex">
                                <i *ngIf="showColumnIcon(column)" class="fa fa-check"> </i> {{column.displayName}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table [ngClass]="this.tableModel.cssClass" [ngStyle]="this.tableModel.style" *ngIf="tableData && tableData.length">
            <thead>
                <tr>
                    <th *ngFor="let column of tableModel.columns | visible:hiddenFields;let in=index;trackBy:trackByIndex" [ngClass]="this.tableModel.headerCssClass"
                        [ngStyle]="this.tableModel.headerStyle">
                        <a (click)="onSortClick(column)" class="sui-pointer">
                            <span> {{column.displayName}} </span>
                            <span class="sui-margin-left-5" *ngIf="column.canSort"> 
                                    <i class="{{sortedIcon}}" *ngIf="sortKey == column.fieldName"> </i>
                                    <i class="{{tableModel.sortIcon}}" *ngIf="sortKey != column.fieldName"> </i>
                            </span>
                        </a>

                    </th>
                    <th> </th>
                </tr>
                <tr>
                    <th *ngFor="let column of tableModel.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);let rr=index;trackBy:trackByIndex" [value]="item.key">{{item.value}}</option>
                             </select>
                        </div>
                    </th>
                    <th> </th>
                </tr>

            </thead>
            <tbody>
                <tr *ngFor="let row of tableData | filter : filters |orderBy:sortKey:descOrder| pagination :currentPage:pageSize| delete:deleteIndex| add:rowToAdd ; let in=index;trackBy:trackByIndex ">
                    <td *ngFor="let k=index;trackBy:trackByIndex;let col of tableModel.columns | visible:hiddenFields" [ngClass]="this.tableModel.rowCssClass"
                        [ngStyle]="this.tableModel.rowStyle">
                        <span *ngIf="col.fieldType!==4 &&col.fieldType!==7">{{row[col.fieldName]}}</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>
                        <a class="sui-btn-info" (click)="onEditRow(row)"> <i class="{{tableModel.cssEditIcon}}"> </i> </a>
                        <a class="sui-btn-danger" (click)="onDeleteRow(row)"> <i class="{{tableModel.cssDeleteIcon}}"> </i> </a>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
    <div class="sui-pagination-container" >
        <ul class="sui-pagination sui-border sui-round" *ngIf="tableModel.pagination.showPaging && totalPageCount>1">
            <li *ngIf="tableModel.pagination.showGoToStartArrow"><a (click)="onPageClick(1)" title="{{tableModel.pagination.toolTipGoToStart}}"><i class="{{tableModel.pagination.clsGoToStartIcon}}"> </i> </a></li>
            <li *ngIf="tableModel.pagination.showGoToPreviousArrow"><a (click)="onPageClick(currentPage-1)" title="{{tableModel.pagination.toolTipGoToPrevious}}"><i class="{{tableModel.pagination.clsGoToPreviousPageIcon}}"> </i></a></li>
            <li *ngFor="let item of getPages()"><a (click)="onPageClick(item)" class="{{currentPage==item ? tableModel.pagination.activePageCssClass : 'sui-pointer'}}">{{item}}</a></li>
            <li *ngIf="tableModel.pagination.showGoToNextArrow"><a (click)="onPageClick(currentPage+1)" title="{{tableModel.pagination.toolTipGoToNext}}"><i class="{{tableModel.pagination.clsGoToNextPageIcon}}"> </i></a></li>
            <li *ngIf="tableModel.pagination.showGoToEndArrow"><a (click)="onPageClick(totalPageCount)" title="{{tableModel.pagination.toolTipGoToEnd}}"><i class="{{tableModel.pagination.clsGoToEndIcon}}"> </i></a></li>
        </ul>

        <select class="sui-select sui-border sui-right" [(ngModel)]="pageSize" (change)="onpageSizeChange($event)" *ngIf="tableModel.pagination.showPaging && pageSize>1 && tableData && tableData.length"> 
             <option *ngFor="let item of tableModel.pageSizeArray;" [value]="item">{{item}}</option>
         </select>
    </div>
</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>