nts-ng2-components/src/components/ui/datagrid/datagrid.component.html

Paquete de componentes para Angular2 desarrollado por NITSNETS.

<div class="datagrid-container">
    <nts-datagrid-header> </nts-datagrid-header>
    <div class="datagrid-body">
        <nts-datagrid-row
            *ngFor="let row of dataView |
                fillMap : dataSource |
                sort : localSort |
                paginate : (pageable ? localPage : -1) : pageSize;
                let i = index;"
            [anySelected]="selected.length ? true : false"
            [box]="true"
            [selected]="row.selected"
            [deletingSelection]="deletingSelection"
            [highlight]="highlightRow"
            (selectedChange)="onSelectItem(row.id, $event)"
            (delete)="onDeleteItem(row.id)"
            (click)="rowClick.emit({i: i + page * pageSize, row: row})"
        >
            <ng-container *ngIf="!customRow">
                <nts-datagrid-cell
                    *ngFor="let column of columns; let j = index;"
                    [width]="column.width"
                    [highlight]="column.highlightCell === undefined ? highlightCell : column.highlightCell"
                    [showLabels]="column.showLabels === undefined ? showLabels : column.showLabels"
                    [style.text-align]="column.formatOptions?.align || 'left'"
                    [customCell]="column.customCell"
                    [clickPropagation]="column.clickPropagation"
                    [value]="column.getValue(row)"
                    [label]="column.title"
                    [format]="column.format"
                    [class]="column.cellClass"
                    [options]="column.formatOptions"
                    [context]="{$implicit: row, i: i, j: j, row: row, column: column, cell: row[column.field]}"
                ></nts-datagrid-cell>
            </ng-container>
            <ng-container *ngIf="customRow">
                <ng-template [ngTemplateOutlet]="customRow" [ngOutletContext]="{ $implicit: row, i: i }"> </ng-template>
            </ng-container>
        </nts-datagrid-row>
    </div>
</div>

<nts-separator></nts-separator>

<nts-paginator
    *ngIf="pageable && pageSize < (local ? dataView.length : totalItems)"
    [totalElements]="local ? dataView.length : totalItems"
    [pageSize]="pageSize || (local ? 10 : dataView.length)"
    [selected]="page"
    (selectedChange)="onPageChange($event)"
>
</nts-paginator>