Page navigation
Control displayed rows per page and page navigation.
Options
Changes below update the Grid and code immediately.
Initially rows 1–20 of 120 are displayed. Check the page number and total count below the table.
View code
Sample data included in the code · 6 rows
Usage guide
#Use pagination to show a fixed number of orders and navigate between pages.
Try it yourself
- Read the current range
Initially rows 1–20 of 120 are displayed. Check the page number and total count below the table.
- Go to the next page
Click page 2 or the next arrow. Different orders appear and the displayed range changes.
- Change the page size
Select 50 in the row-count selector below the table. Each page shows more rows and the page count decreases.
The current page and displayed range update together. Inspect navigation results in paginationChanged.
Sample row count controls total data volume; the selector below the table controls page size. These are separate settings.
Useful terms
- pageSize
- The number of rows displayed per page.
- pagination
- A setting enabling or disabling pagination.
API reference
#Key properties
| Attribute / Property | Type / Default | Description |
|---|---|---|
booleanDefault: false | Enable the wrapper-rendered pagination control bar. | |
| pageSize | numberDefault: DEFAULT_PAGE_SIZE | Initial page size. Defaults to . |
| pageSizeOptions | readonly number[]Default: DEFAULT_PAGE_SIZE_OPTIONS | Page-size selector options. Defaults to . |
Events1
| Events | Detail type | Description |
|---|---|---|
GridPaginationChangedDetail | Fires when active page or page size changes. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.