KendoReact Data Grid Paging Overview

The KendoReact Data Grid provides a flexible paging mechanism that enables users to navigate large datasets efficiently. The built-in pager allows for numeric and input-based navigation, as well as customizable paging components.

Getting Started with the KendoReact Data Grid Paging

Pagination is enabled in the Grid by setting the pageable property. This adds navigation controls to the bottom of the Grid, allowing users to move between pages.

Enabling Paging

The KendoReact Grid supports paging in two modes:

• Built-in State Management: The Grid manages its own paging state internally.

• Controlled Mode: The paging state is externally managed by handling events and updating the state accordingly.

Using the Built-in State Management for Paging

To enable basic numeric paging using the built-in state management mechanism, follow these steps:

1. Enable the autoProcessData prop to allow the Grid to handle paging automatically.
2. Set the pageable prop of the Grid to enable pagination.
3. Set the defaultTake prop to define the number of items rendered initially.
4. Use the defaultSkip prop to specify the number of items to be skipped initially, determining the starting page.

The following example demonstrates how to implement numeric paging using the built-in state management of the KendoReact Grid.

Change Theme

Theme

Loading ...

Using the Paging in Controlled Mode

To enable numeric paging in the KendoReact Grid and use it in controlled mode, follow these steps:

1. Set the pageable prop of the Grid to enable paging.
2. Use the skip prop used to track the current page.
3. Set the pageSize or the take options of the Grid to specify how many items will be rendered on the page.
4. Use the total prop to notify the Grid how many records are in total, which is needed to calculate the correct total pages.
5. Handle the onPageChange or the onDataStateChange event of the Gridfor managing the paging state.
6. Use the slice method or the built-in process method to manage paging logic.

The following example demonstrates how to implement basic numeric paging in controlled mode.

Change Theme

Theme

Loading ...

Pager Types

The Grid supports different pager types:

• Numeric—Renders buttons with numbers.
• Input (responsive)—Renders an input field for typing the page number.
• Custom Pager—Allows you to change entirely the Pager rendering.

The PagerSettings object has the following fields:

• buttonCount—Sets the maximum numeric buttons count before the buttons are collapsed.
• info—Toggles the information about the current page and the total number of records.
• type—Accepts the numeric (buttons with numbers) and input (input for typing the page number) values.
• pageSizes—Shows a menu for selecting the page size.
• previousNext—Toggles the Previous and Next buttons.

To set the pager types, pass the PagerSettings object to the pageable option of the Grid.

Change Theme

Theme

Loading ...

Suggested Links

• React Data Grid
• React Data Grid High-Level Overview
• Numeric Paging
• Custom Paging