Open In App

How to use Filtering in DataGrid Component in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Using the DataGrid Component’s filtering feature enables users to pinpoint specific records for a more targeted display. The ReactJS DataGrid Component arranges information in a grid layout, and implementing filtering follows a simple and user-friendly approach.

Prerequisite:

Approach to use Filtering in DataGrid Component:

With the help of the filterModel prop, we can do the filtering in the DataGrid Component. In the below example, we have passed columnField as name and operatorValue as contains and value as Geek, therefore it will show all rows which have a name field that contains Geek value in it.

  • Import the needed components and set up the DataGrid by defining columns and rows. Adjust the layout and content to your liking.
  • We’re filtering based on the ‘name’ column, specifically looking for entries containing ‘Geek’.
  • Put your DataGrid into your React app, give it the data it needs, and customize how it looks. The example demonstrates a basic React function component, illustrating how to make the DataGrid filter data for a neat display.

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 install @material-ui/data-grid

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
"@material-ui/data-grid": "^4.0.0-alpha.37",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file.

Javascript




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 },
];
 
export default function App() {
    return (
        <div style={{ height: 500, width: '80%' }}>
            <h4>
                How to use Filtering in DataGrid
                Component in ReactJS?
            </h4>
            <DataGrid rows={rows}
                columns={columns}
                pageSize={2}
                filterModel={{
                    items: [
                        {
                            columnField: 'name',
                            operatorValue: 'contains',
                            value: 'Geek'
                        },
                    ],
                }}
            />
        </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



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