pagination with react kendo grid

2 min read 02-10-2024

Pagination is an essential feature in web applications, allowing users to navigate through large datasets in a more manageable and user-friendly way. In this article, we'll explore how to implement pagination using the React Kendo Grid component, providing a seamless experience for displaying tabular data.

Problem Scenario

Let’s say you are building a data-driven application using React, and you need to present a large dataset in a user-friendly format. You have decided to use Kendo Grid, a powerful component that offers built-in support for features like sorting, filtering, and pagination. However, if you're unfamiliar with implementing pagination, you might face some challenges. Below is an example of code where pagination was not properly integrated.

Original Code Example

import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

const MyGridComponent = () => {
    const data = [...Array(100).keys()].map(num => ({ id: num, name: `Item ${num}` }));

    return (
        <Grid data={data}>
            <GridColumn field="id" title="ID" />
            <GridColumn field="name" title="Name" />
        </Grid>
    );
};

export default MyGridComponent;

Issue

In the code above, while the Kendo Grid displays all data items, it does not implement pagination. This can overwhelm the user and degrade the application’s performance when dealing with large datasets.

Solution: Implementing Pagination in Kendo Grid

To add pagination functionality, you can make use of the page, pageSize, and data properties of the Kendo Grid. Here's how to modify the original code to include pagination:

Updated Code with Pagination

import React, { useState } from 'react';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { Pager } from '@progress/kendo-react-data-tools';

const MyGridComponent = () => {
    const [data] = useState([...Array(100).keys()].map(num => ({ id: num, name: `Item ${num}` })));
    const [page, setPage] = useState({ skip: 0, take: 10 });

    const onPageChange = (event) => {
        setPage(event.page);
    };

    return (
        <div>
            <Grid
                data={data.slice(page.skip, page.skip + page.take)}
                pageable={true}
                {...page}
                onPageChange={onPageChange}
            >
                <GridToolbar>
                    <h4>My Data Grid</h4>
                </GridToolbar>
                <GridColumn field="id" title="ID" />
                <GridColumn field="name" title="Name" />
            </Grid>
            <Pager
                total={data.length}
                page={page.skip / page.take + 1}
                pageSize={page.take}
                onPageChange={onPageChange}
            />
        </div>
    );
};

export default MyGridComponent;

Key Changes and Explanation

State Management: We introduced a state variable page to keep track of the current page, including skip (number of items to skip) and take (number of items per page).
Data Slicing: The data passed to the Grid is sliced based on the current page. This means only the relevant data is shown, improving performance and user experience.
Pagination Controls: The Pager component provides navigation controls, allowing users to switch between pages seamlessly.
Event Handling: The onPageChange event updates the state when the user navigates through the pages, ensuring that the displayed data updates accordingly.

Conclusion

Implementing pagination in a React Kendo Grid is straightforward and significantly enhances the user experience when dealing with large datasets. By leveraging the built-in features of Kendo UI, developers can create responsive and efficient applications.

For further reading, check out the following resources:

With these insights, you should be well-equipped to implement pagination in your own applications using React and Kendo Grid. Enjoy building your data-driven applications!