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:
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. |
firstItem | Index of the first item displayed on the current page, starting from 0. | |
lastItem | Index of the last item displayed on the current page, starting from 0. |
Here is an example of how to use pagination, and attach a template reference variable to it to display information on the current page.