Example of Paging in Blazor Pivot Table Component
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.
Grand Total |
|---|
| Grand Total | No records to display |
Row pager
Rows per page
Column pager
Columns per page
Properties
Pager Position: |
|
Show Pager: |
|
Show Page Size: |
|
Compact View: |
|
Inverse Pager: |
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 PivotViewPageSettings. The PivotViewPageSettings 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 PivotViewPagerSettings. The PivotViewPagerSettings 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. |
More information on the paging feature can be found in this documentation section.