I developed a widget where I display some data using the angular material table. The data is quite large and users need to scroll for a long time to see all the data. I want to show a pagination so that it will help users to see the data by clicking on the pagination link.
Here is my HTML code:
<mat-table [dataSource]="tableData" id="reportTable" style="background-color:inherit;">
<ng-container *ngFor="let column of tableMeta" [matColumnDef]="column.key">
<mat-header-cell *matHeaderCellDef [style.background-color]="settings?.tableHeaderBgColor" [style.color]="settings?.tableHeaderTxtColor">{{column.title}}
</mat-header-cell>
<mat-cell *matCellDef="let element" style="color:inherit;"> {{element[column.key]}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns" [style.background-color]="settings?.tableHeaderBgColor"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>Here is the JavaScript:
let $scope = self.ctx.$scope;
$scope.tableMeta=[{'title':'Date', 'key':'date'},{'title':'Online', 'key':'online'}, {'title':'Running', 'key': 'running'}, {'title':'Stopped', 'key': 'stopped'}, {'title':'Offline', 'key': 'offline'}];
$scope.displayedColumns=['date', 'online', 'running', 'stopped', 'offline'];
$scope.tableData=[] //Here will be the dataset.Is there anyone who knows how to add functional pagination?
Something like this. Slice part of the data to dataSource and add the pagination element:
<mat-table
[dataSource]="tableData.slice(tablePagination.getFrom(), tablePagination.getTo())"
id="reportTable"
style="background-color:inherit;"
>
...
...
</mat-table>
<mat-paginator
[length]="tableData.length"
[pageSize]="tablePagination.pageSize"
[pageSizeOptions]="tablePagination.pageSizeOptions"
(page)="tablePagination.handler($event)"
aria-label="Select page"
showFirstLastButtons="true"
></mat-paginator>
In your JS, set data, settings and the page handler:
self.onInit = () => {
const tableData = [] // Your data
const tablePagination = {
pageIndex: 0,
pageSize: 25,
pageSizeOptions: [25, 50, 100],
handler: (pagination) => {
const { pageIndex, pageSize } = pagination;
if (pageSize !== undefined) {
tablePagination.pageSize = pageSize;
}
if (pageIndex !== undefined) {
tablePagination.pageIndex = pageIndex;
}
},
getFrom: () => {
const { pageIndex, pageSize } = tablePagination;
return pageIndex * pageSize;
},
getTo: () => {
const { pageIndex, pageSize } = tablePagination;
return pageIndex * pageSize + pageSize;
}
}
const { $scope } = self.ctx
$scope.tableData = tableData
$scope.tablePagination = tablePagination
}