Row Pagination
This section describes how to display a fixed amount of rows, in other words, page by page.
Last updated
This section describes how to display a fixed amount of rows, in other words, page by page.
Last updated
Row Pagination live example.
To allow the user to paginate the DikeGrid rows, you must provide an input property named allowPagination at the grid scope.
You can change the value of the allowPagination property at runtime.
Open the Floating Configuration Panel and click on the Allow Pagination checkbox.
After enabling the pagination, you will see the DikeGrid paginator at the bottom of the content rows.
By default, the page size is 50. You can change this value by providing an input property named pageSize.
As you can see in the previous code snippet, we have bound the pageSize property to the gridProperties object. Therefore, you can open the Floating Configuration Panel and change the value for the page size.
Since the DikeGrid structure uses the CSS Grid Layout specification, the paginator is called Pagination Row. Indeed, the Pagination Row is the template-row definition where the paginator lives.
You can change the height of the Pagination Row. For further details, see the Grid Structure - Paginator section.
For this section, we have bound the input property paginationRowHeight to the related property from the gridProperties object.
The DikeGrid internally uses the MatPaginator component. Therefore, the DikeGrid definition wraps the MatPaginator instance.
Before accessing and using the pagination API, you must retrieve the related DikeGrid instance by querying the component's view.
The pagination API is an instance of type DikeGridPagination under the DikeGridComponent through the read-only property named pagination.
The DikeGrid pagination API exposes the MatPaginator instance through a read-only property named matPaginator.
Retrieving and using the DikeGrid pagination API helps in defining a custom Datasource.
Every time the user navigates through the available pages, the DikeGrid instance emits a page event.
Since you can allow the pagination at runtime, the pagination API exposes an event that fires the MatPaginator instance.
The pagination API exposes the following events:
| Event | Description |
|---|---|
| This event fires every time the user navigates through the available pages. |
| This event fires when the user allows or disallows the DikeGrid's pagination. |
We are listening to both events:
For the pageChange event, the emitted object is the same as the MatPaginator sends. For further details, see the Angular Material official docs.
You can also listen to the pagination events from the DikeGridPagination instance.
Open the dev console to see the output of the pagination events.
To perform the pagination operation, you must allow it by providing an input property named allowPagination. The DikeGrid definition internally uses the MatPaginator component. Therefore, every DikeGrid instance exposes its corresponding MatPaginator instance through the pagination API.
