How to show pagination in thingsboard custom widget table?

Question

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?

Answer 1

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
}