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 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:
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: