So far, our examples' data only contained a few entries. The point of a datagrid is to display large amounts of data, and we can't reasonably display it all at the same time on the page. To solve this, our datagrid supports pagination.
To activate pagination on your datagrid, you simply need to add a
<clr-dg-pagination>
component in your datagrid's footer. This component exposes many of properties, most of them bindable, to help you interact with it. You can optionally include a clr-dg-page-size
component to bind a list of options to display for toggling the number of items per page.
Input/Output | Component property | Effect |
---|---|---|
[(clrDgPage)] | currentPage | Index of the currently displayed page, starting from 1. |
[clrDgPageSize] | pageSize | Number of items displayed per page. Defaults to 10. |
[clrDgTotalItems] | totalItems | Total number of items present in the datagrid, after the filters have been applied. |
[clrDgLastPage] | lastPage | Index of the last page for the current data. |
[clrDgPageInputDisabled] | disableCurrentPageInput | Disables the current page input. |
firstItem |
If totalItems is not 0, the value is set to the index of the first item displayed on the current page, starting from 0.
If totalItems is 0, the value is set to -1. |
|
lastItem |
If totalItems is not 0, the value is set to the index of the last item displayed on the current page, starting from 0.
If totalItems is 0, the value is set to -1. |
Here is an example of how to use pagination, and attach a template reference variable to it to display information on the current page.