Paging

The KendoReact Data Grid enables you to split its content into pages.

The Grid Package is part of KendoReact, a professionally built commercial UI library. To try out this Grid you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.


Getting Started

To enable paging:

  1. Set the pageable prop for the Grid. As a result, the Grid renders a paging UI navigation to the bottom of the Grid and enhances user interaction.
  2. Use the skip prop, which is used to calculate 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 onPageChage or the onDataStateChange event of the Grid. The onDataStateChange event is recommended when the Grid will have other data operations as it provides the complete dataState in a single event.
  6. Page the data on the client by using the slice method or our built-in process method. The data can also be paged on the server by making a request using the event parameters.

The slice method is recommended when using the onPageChange event and the process method is recommended when using the onDataStateChange event.

The following example demonstrates the minimum required configuration for paging the Grid records.

Example
View Source
Edit In Stackblitz  
Change Theme:

Pager Types

The pager types of the Grid are:

  • NumericRenders buttons with numbers.
  • InputRenders an input field for typing the page number.

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

The PagerSettings object has the following fields:

  • buttonCountSets the maximum numeric buttons count before the buttons are collapsed.
  • infoToggles the information about the current page and the total number of records.
  • typeAccepts the numeric (buttons with numbers) and input (input for typing the page number) values.
  • pageSizesShows a menu for selecting the page size.
  • previousNextToggles the Previous and Next buttons.
Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Pager

The Grid allows rending a custom component through its pager property.

In the following example we render a Slider and a NumericTextBox components to change the current page.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?