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