This sample shows how to use the paging option to break and load a large data source into chunks and display them page by page. You can also use the built-in navigation buttons to move between pages.
The pivot table provides an optimized way to render rows and columns page by page without displaying the entire
pivot data. To enable paging, set the enablePaging property to true. You can also configure
page information for
row and column, such as page size, current page, and so on, using the pageSettings. The
pageSettings
properties are explained in-detail below:
currentRowPage :
|
Holds the current page number, row-wise. You can also change the page number at runtime. |
currentColumnPage :
|
Holds the current page number, column-wise. You can also change the page number at runtime. |
rowPageSize :
|
Indicates the number of records to be displayed in each page, row-wise. You can also change the page size at runtime. |
columnPageSize :
|
Indicates the number of records to be displayed in each page, column-wise. You can also change the page size at runtime. |
Also, you can customize the paging UI by changing the position, visibility, page size, and other settings for
row and column using the pagerSettings. The pagerSettings properties are explained
in-detail below:
position :
|
Display the pager UI either at top or bottom of the Pivot Table. |
isInversed :
|
Toggle and display the row and column pagers. |
showRowPager :
|
Show or hide the row pager in the pager UI. |
showColumnPager :
|
Show or hide the column pager in the pager UI. |
showRowPageSize :
|
Show or hide the pre-defined page sizes in the row pager UI. |
showColumnPageSize :
|
Show or hide the pre-defined page sizes in the column pager UI. |
rowPageSizes :
|
Allows you to assign a set of pre-defined page sizes in the pager UI's "Rows per page" dropdown, which can be used to change the number of records displayed in row at runtime. |
columnPageSizes :
|
Allows you to assign a set of pre-defined page sizes in the pager UI's "Columns per page" dropdown, which can be used to change the number of records displayed in column at runtime. |
enableCompactView :
|
Allows the paging UI to be displayed with minimal design by hiding all paging information except navigation options. |
template :
|
Allows you to change the appearance of the pager UI by displaying user-defined HTML elements instead of built-in HTML elements. |
Injecting Module:
The pivot table features are segregated into individual modules. To use the paging option, we
need to inject the
Pager module using the
services tag.
More information on the paging can be found in this documentation section.