org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/chartviewer/components/datatable/data-table.component.html

<!--********************************************************************************
 * Copyright (c) 2015-2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************-->

<p-table #datatable [value]="datapoints" [columns]="cols" [lazy]="true" (onLazyLoad)="loadLazy($event)" [paginator]="true" 
[rows]="recordsPerPage" [totalRecords]="totalRecords" [loading]="tableLoading" [rowsPerPageOptions]="[10, 20, 50, 100, 1000]">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th>Index</th>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-i="rowIndex" let-columns="columns">
        <tr style="height:34px">
            <td>{{i}}</td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage" let-columns>
        <tr>
            <td [attr.colspan]="columns.length">
                No records found
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="paginatorleft" let-state>
            Total: {{state.totalRecords}}
        </ng-template>
    
</p-table>