How to use Filtering in DataGrid Component in ReactJS ?

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>

    );
}