Open In App

How to use Pagination in DataGrid Component in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Pagination helps in viewing a segment of data from the assigned data source. Pagination improves the user experience as users can switch between pages to see data. DataGrid Component helps in displaying the information in a grid-like format of rows and columns. We can use the following approach in ReactJS to use Pagination in DataGrid Component.

Prerequisites:

Approach:

To use Pagination in DataGrid Component in React JS use the rowsPerPageOptions prop, we can do the Pagination in DataGrid Component like we have passed [2, 5, 7] as a value which means we can show users the option to see 2 or 5 or 7 rows on a single page. The default pageSize is 100, but we can change this value with the pageSize prop.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui module using the following command:

npm i @material-ui/data-grid

Project Structure:

Project Structure

The updated dependencies in package.json file.

"dependencies": {
"@material-ui/data-grid": "^4.0.0-alpha.37",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Example: This example implements the Pagination in DataGrid Component.

Javascript




// Filename - App.js
 
import * as React from "react";
import { DataGrid } from "@material-ui/data-grid";
 
const columns = [
    { field: "id", headerName: "ID", width: 170 },
    { field: "name", headerName: "NAME", width: 170 },
    { field: "age", headerName: "AGE", width: 170 },
];
 
const rows = [
    { id: 1, name: "Gourav", age: 12 },
    { id: 2, name: "Geek", age: 43 },
    { id: 3, name: "Pranav", age: 41 },
    { id: 4, name: "Abhay", age: 34 },
    { id: 5, name: "Pranav", age: 73 },
    { id: 6, name: "Disha", age: 61 },
    { id: 7, name: "Raghav", age: 72 },
    { id: 8, name: "Amit", age: 24 },
    { id: 9, name: "Anuj", age: 48 },
];
 
export default function App() {
    return (
        <div style={{ height: 500, width: "80%" }}>
            <h4>
                How to use Pagination in DataGrid Component
                in ReactJS?
            </h4>
            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[2, 5, 7]}
            />
        </div>
    );
}


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:



Last Updated : 16 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads