Paging in React Data Grid
The Syncfusion® React Data Grid paging feature provides an option to display grid data in segmented pages, making it easier to navigate through datasets. This feature is particularly useful when dealing with extensive datasets.
Enable paging
Enable paging by setting pageSettings.enabled property to true on the grid. By default, the grid displays "12" records per page.
Configuring page settings
The pageSettings property configures paging behavior within the grid and includes:
| Property | Description |
|---|---|
pageSize | Sets the number of rows displayed per page. |
currentPage | Specifies the active page number. |
pageCount | Configures how many pager buttons are visible in the navigation. |
Pager template
The pager template in the grid enables customization of the appearance and behavior of the pager element. This feature is useful when custom elements are preferred over the default pager controls.
To apply a pager template, use the pageSettings.template property in the grid configuration. Within the template, values such as currentPage, pageSize, and pageCount are available to assist in creating a custom layout.
Programmatic page navigation
The Data Grid's goToPage method allows navigating to a specific page programmatically. It is helpful for managing page navigation through external actions.
Events
The Data Grid component includes event hooks that fire when navigation occurs between page.
| Event | Description |
|---|---|
onPageChange | Fires after a paging operation is completed on the grid. Provides page navigation details for post-page-change actions such as updating UI elements, loading data, or triggering dependent logic. |