# grid-default-filtering

> Data grid demonstrating the default filter menu and its paired UI control options.

**Framework:** react  **Component:** Grid  **Variant:** default-filtering

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/js/grid-default-filtering.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-grids @syncfusion/ej2-react-dropdowns @syncfusion/ej2-react-buttons
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-default-filtering/Grid.jsx

```jsx
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Filter, Inject, Sort } from '@syncfusion/ej2-react-grids';

const categoryData = [
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Chai',
        'QuantityPerUnit': '10 boxes x 20 bags',
        'UnitsInStock': 39,
        'Discontinued': true
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Chang',
        'QuantityPerUnit': '24 - 12 oz bottles',
        'UnitsInStock': 17,
        'Discontinued': true
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Chartreuse verte',
        'QuantityPerUnit': '750 cc per bottle',
        'UnitsInStock': 69,
        'Discontinued': true
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'C\u00f4te de Blaye',
        'QuantityPerUnit': '12 - 75 cl bottles',
        'UnitsInStock': 17,
        'Discontinued': true
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Ipoh Coffee',
        'QuantityPerUnit': '16 - 500 g tins',
        'UnitsInStock': 17,
        'Discontinued': false
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Lakkalik\u00f6\u00f6ri',
        'QuantityPerUnit': '500 ml',
        'UnitsInStock': 57,
        'Discontinued': true
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Laughing Lumberjack Lager',
        'QuantityPerUnit': '24 - 12 oz bottles',
        'UnitsInStock': 52,
        'Discontinued': false
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Outback Lager',
        'QuantityPerUnit': '24 - 355 ml bottles',
        'UnitsInStock': 15,
        'Discontinued': false
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Rh\u00f6nbr\u00e4u Klosterbier',
        'QuantityPerUnit': '24 - 0.5 l bottles',
        'UnitsInStock': 125,
        'Discontinued': false
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Sasquatch Ale',
        'QuantityPerUnit': '24 - 12 oz bottles',
        'UnitsInStock': 111,
        'Discontinued': true
    },
    {
        'CategoryName': 'Beverages',
        'ProductName': 'Steeleye Stout',
        'QuantityPerUnit': '24 - 12 oz bottles',
        'UnitsInStock': 20,
        'Discontinued': true
    },
    {
        'CategoryName': 'Condiments',
        'ProductName': 'Aniseed Syrup',
        'QuantityPerUnit': '12 - 550 ml bottles',
        'UnitsInStock': 13,
        'Discontinued': true
    },
    {
        'CategoryName': 'Condiments',
        'ProductName': 'Chef Anton\'s Cajun Seasoning',
        'QuantityPerUnit': '48 - 6 oz jars',
        'UnitsInStock': 53,
        'Discontinued': false
    },
    {
        'CategoryName': 'Condiments',
        'ProductName': 'Genen Shouyu',
        'QuantityPerUnit': '24 - 250 ml bottles',
        'UnitsInStock': 39,
        'Discontinued': false
    },
    {
        'CategoryName': 'Condiments',
        'ProductName': 'Grandma\'s Boysenberry Spread',
        'QuantityPerUnit': '12 - 8 oz jars',
        'UnitsInStock': 120,
        'Discontinued': false
    }];

function Filtering() {
    let gridInstance;
    const filData = [
        { id: '1', category: 'All' },
        { id: '2', category: 'Beverages' },
        { id: '3', category: 'Condiments' },
        { id: '4', category: 'Confections' },
        { id: '5', category: 'Dairy Products' },
        { id: '6', category: 'Grains/Cereals' },
        { id: '7', category: 'Meat/Poultry' },
        { id: '8', category: 'Produce' },
        { id: '9', category: 'Seafood' }
    ];
    const fields = { text: 'category', value: 'id' };
    function onChange(sel) {
        if (sel.itemData.category === 'All') {
            gridInstance.clearFiltering();
        }
        else {
            gridInstance.filterByColumn('CategoryName', 'equal', sel.itemData.category);
        }
    }
    
    return (<div className='control-pane'>
            <div className='col-lg-9 control-section'>
                <div style={{ padding: '14px 0' }}>
                    <div className="select-wrap">
                        <DropDownListComponent id="ddlelement" dataSource={filData} fields={fields} change={onChange.bind(this)} placeholder="Select category to filter" width="200px"/>
                    </div>
                </div>
                <GridComponent dataSource={categoryData} allowPaging={true} allowSorting={true} ref={grid => gridInstance = grid} pageSettings={{ pageSize: 10, pageCount: 5 }} allowFiltering={true}>
                    <ColumnsDirective>
                        <ColumnDirective field='CategoryName' headerText='Category Name' width='150'></ColumnDirective>
                        <ColumnDirective field='ProductName' headerText='Product Name' width='150'></ColumnDirective>
                        <ColumnDirective field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></ColumnDirective>
                        <ColumnDirective field='Discontinued' headerText='Discontinued' width='150' textAlign='Center' displayAsCheckBox={true} type='boolean'></ColumnDirective>
                    </ColumnsDirective>
                    <Inject services={[Filter, Page, Sort]}/>
                </GridComponent>
            </div>

        </div>);
}
export default Filtering;
```