GRID FEATURE
Page navigation
Pagination controls the number of displayed rows and the current page position. Total data size and page size are separate settings.
How it works and when to use it
Distinguish client paging with all rows in the browser from server queries that fetch one range at a time. Enabling pagination does not create a server query API.
In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.
Example 1. Display 20 rows per page
Provide choices below the table so users can change the page size.
grid.pagination = true;
grid.pageSize = 20;
grid.pageSizeOptions = [20, 50, 100];Verify the result: 120 rows can be browsed across six pages of 20. Changing the choice recalculates the displayed range.
Example 2. Use a continuous scrolling list
For many rows where continuous browsing matters, disable pagination and use virtual scrolling.
grid.pagination = false;
grid.virtualScroll = true;Verify the result: Users navigate with the Grid's internal scrollbar instead of page numbers. Downloaded data volume depends on whether a remote row model is used.
Example 3. Display navigation results elsewhere
Use page-change events to update your app's guidance or analytics logs.
grid.addEventListener('paginationChanged', event => console.log(event.detail));Verify the result: The updated page information is emitted. Also verify whether the total count reflects displayed results after filtering and grouping.
Combining features and troubleshooting
Searching may shrink results enough to invalidate the previous page. Follow the state emitted by the Grid instead of retaining a page number independently.
Group row counts can differ from source order counts, so do not always compare pagination totals directly with source orders.
Related reading
- How rows, columns, and IDs relate
- Connect results and events
- Explore in Features
The guide describes which interactions are available to try.