How to use Pagination in DataGrid Component in ReactJS ?
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 foldernameStep 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldernameStep 3: After creating the ReactJS application, Install the material-ui module using the following command:
npm i @material-ui/data-gridProject 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.
// 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 startOutput: Now open your browser and go to http://localhost:3000/, you will see the following output:
