@rdkmaster/jigsaw-labs/component/table/table.html

Jigsaw, the next generation component set for RDK

<div class="jigsaw-table-range" #contentScrollbar
     [perfectScrollbar]="{suppressScrollY: true, wheelSpeed: 0.5, wheelPropagation: true, minScrollbarLength: 20}"
     [class.jigsaw-table-hide-head]="hideHeader">
    <table class="jigsaw-table-header" [hidden]="hideHeader">
        <colgroup>
            <col *ngFor="let head of _$headerSettings;" width="{{head.width}}">
        </colgroup>
        <thead>
        <tr>
            <td *ngFor="let head of _$headerSettings;" class="{{head.clazz}}">
                <jigsaw-table-header [tableData]="data"
                                     [additionalData]="additionalData"
                                     [cellData]="head.cellData"
                                     [field]="head.field"
                                     [row]="0"
                                     [renderer]="head.renderer"
                                     [sortable]="head.sortable"
                                     [sortAs]="head.sortAs"
                                     [defaultSortOrder]="head.defaultSortOrder"
                                     (sort)="_$onSort($event)">
                </jigsaw-table-header>
            </td>
        </tr>
        </thead>
    </table>
    <div #bodyScrollbar class="jigsaw-table-body-range" [style.width]="contentWidth"
         [class.jigsaw-table-no-data]="!_$cellSettings.length"
         [perfectScrollbar]="{suppressScrollX: true, wheelSpeed: 0.5, wheelPropagation: true, minScrollbarLength: 20}">
        <img [style.display]="!!_$cellSettings.length ? 'none' : 'block'" class="jigsaw-table-no-data-img"
             src="{{_$noDataSrc}}">
        <table class="jigsaw-table-body">
            <colgroup>
                <col *ngFor="let head of _$headerSettings;" width="{{head.width}}">
            </colgroup>
            <thead *ngIf="_$isFFBrowser">
            <tr>
                <td *ngFor="let head of _$headerSettings;" class="{{head.clazz}}"></td>
            </tr>
            </thead>
            <tbody>
            <tr #tableRow *ngFor="let row of _$cellSettings; index as rowIndex"
                (click)="_$clickRow(rowIndex)" (dblclick)="_$handleRowDoubleClick(rowIndex)">
                <td *ngFor="let cell of row;"
                    [attr.rowspan]="cell.rowSpan > 1 ? cell.rowSpan : null"
                    [style.display]="cell.rowSpan ? 'table-cell' : 'none'"
                    class="{{cell.clazz}} {{cell.tooltip ? 'jigsaw-table-line-ellipsis': ''}}">
                    <ng-container [ngSwitch]="cell.renderer">
                        <div *ngSwitchCase="null || undefined" class="jigsaw-table-cell-content">
                            <span class="jigsaw-table-cell-text" title="{{cell.tooltip ? cell.tooltip : ''}}">{{cell.cellData}}</span>
                        </div>
                        <div *ngSwitchCase="'html'" class="jigsaw-table-cell-content"
                             [trustedHtml]="cell.cellData" [trustedHtmlContext]="cell.innerHtmlContext"></div>
                        <jigsaw-table-cell *ngSwitchDefault class="jigsaw-table-cell-content"
                                           title="{{cell.tooltip ? cell.tooltip : ''}}"
                                           [tableData]="data"
                                           [additionalData]="additionalData"
                                           [(cellData)]="cell.cellData"
                                           [row]="rowIndex"
                                           [field]="cell.field"
                                           [renderer]="cell.renderer"
                                           [rendererInitData]="cell.rendererInitData"
                                           [editable]="cell.editable"
                                           [editorRenderer]="cell.editorRenderer"
                                           [editorRendererInitData]="cell.editorRendererInitData"
                                           [group]="cell.group"
                                           [rowSpan]="cell.rowSpan"
                                           (edit)="dataChange.emit($event)">
                        </jigsaw-table-cell>
                    </ng-container>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>