{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-default-filtering",
  "framework": "react",
  "type": "registry:component",
  "component": "Grid",
  "variant": "default-filtering",
  "dependencies": [
    "@syncfusion/ej2-react-grids",
    "@syncfusion/ej2-react-dropdowns",
    "@syncfusion/ej2-react-buttons"
  ],
  "description": "Data grid demonstrating the default filter menu and its paired UI control options.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/grid-default-filtering.md"
  },
  "files": [
    {
      "target": "src/components/grid-default-filtering/Grid.tsx",
      "content": "import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\nimport { GridComponent, ColumnsDirective, ColumnDirective, Page, Filter, Inject, Sort } from '@syncfusion/ej2-react-grids';\nimport { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';\n\nconst categoryData = [\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Chai',\n        'QuantityPerUnit': '10 boxes x 20 bags',\n        'UnitsInStock': 39,\n        'Discontinued': true\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Chang',\n        'QuantityPerUnit': '24 - 12 oz bottles',\n        'UnitsInStock': 17,\n        'Discontinued': true\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Chartreuse verte',\n        'QuantityPerUnit': '750 cc per bottle',\n        'UnitsInStock': 69,\n        'Discontinued': true\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'C\\u00f4te de Blaye',\n        'QuantityPerUnit': '12 - 75 cl bottles',\n        'UnitsInStock': 17,\n        'Discontinued': true\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Ipoh Coffee',\n        'QuantityPerUnit': '16 - 500 g tins',\n        'UnitsInStock': 17,\n        'Discontinued': false\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Lakkalik\\u00f6\\u00f6ri',\n        'QuantityPerUnit': '500 ml',\n        'UnitsInStock': 57,\n        'Discontinued': true\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Laughing Lumberjack Lager',\n        'QuantityPerUnit': '24 - 12 oz bottles',\n        'UnitsInStock': 52,\n        'Discontinued': false\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Outback Lager',\n        'QuantityPerUnit': '24 - 355 ml bottles',\n        'UnitsInStock': 15,\n        'Discontinued': false\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Rh\\u00f6nbr\\u00e4u Klosterbier',\n        'QuantityPerUnit': '24 - 0.5 l bottles',\n        'UnitsInStock': 125,\n        'Discontinued': false\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Sasquatch Ale',\n        'QuantityPerUnit': '24 - 12 oz bottles',\n        'UnitsInStock': 111,\n        'Discontinued': true\n    },\n    {\n        'CategoryName': 'Beverages',\n        'ProductName': 'Steeleye Stout',\n        'QuantityPerUnit': '24 - 12 oz bottles',\n        'UnitsInStock': 20,\n        'Discontinued': true\n    },\n    {\n        'CategoryName': 'Condiments',\n        'ProductName': 'Aniseed Syrup',\n        'QuantityPerUnit': '12 - 550 ml bottles',\n        'UnitsInStock': 13,\n        'Discontinued': true\n    },\n    {\n        'CategoryName': 'Condiments',\n        'ProductName': 'Chef Anton\\'s Cajun Seasoning',\n        'QuantityPerUnit': '48 - 6 oz jars',\n        'UnitsInStock': 53,\n        'Discontinued': false\n    },\n    {\n        'CategoryName': 'Condiments',\n        'ProductName': 'Genen Shouyu',\n        'QuantityPerUnit': '24 - 250 ml bottles',\n        'UnitsInStock': 39,\n        'Discontinued': false\n    },\n    {\n        'CategoryName': 'Condiments',\n        'ProductName': 'Grandma\\'s Boysenberry Spread',\n        'QuantityPerUnit': '12 - 8 oz jars',\n        'UnitsInStock': 120,\n        'Discontinued': false\n    }];\n\nfunction Filtering() {\n    let gridInstance: GridComponent;\n    let checkboxObj: CheckBoxComponent;\n    const filData: { [key: string]: Object }[] = [\n        { id: '1', category: 'All' },\n        { id: '2', category: 'Beverages' },\n        { id: '3', category: 'Condiments' },\n        { id: '4', category: 'Confections' },\n        { id: '5', category: 'Dairy Products' },\n        { id: '6', category: 'Grains/Cereals' },\n        { id: '7', category: 'Meat/Poultry' },\n        { id: '8', category: 'Produce' },\n        { id: '9', category: 'Seafood' }\n    ];\n    const fields: Object = { text: 'category', value: 'id' };\n    function onChange(sel: { itemData: { item: number, category: string } }): void {\n        if (sel.itemData.category === 'All') {\n            gridInstance.clearFiltering();\n        } else {\n            gridInstance.filterByColumn('CategoryName', 'equal', sel.itemData.category);\n        }\n    }\n\n    return (\n        <div className='control-pane'>\n            <div className='col-lg-9 control-section'>\n                <div style={{ padding: '14px 0' }}>\n                    <div className=\"select-wrap\">\n                        <DropDownListComponent id=\"ddlelement\" dataSource={filData} fields={fields} change={onChange.bind(this)} placeholder=\"Select category to filter\" width=\"200px\" />\n                    </div>\n                </div>\n                <GridComponent dataSource={categoryData} allowPaging={true} allowSorting={true} ref={grid => gridInstance = grid} pageSettings={{ pageSize: 10, pageCount: 5 }} allowFiltering={true}>\n                    <ColumnsDirective>\n                        <ColumnDirective field='CategoryName' headerText='Category Name' width='150'></ColumnDirective>\n                        <ColumnDirective field='ProductName' headerText='Product Name' width='150'></ColumnDirective>\n                        <ColumnDirective field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></ColumnDirective>\n                        <ColumnDirective field='Discontinued' headerText='Discontinued' width='150' textAlign='Center' displayAsCheckBox={true} type='boolean' ></ColumnDirective>\n                    </ColumnsDirective>\n                    <Inject services={[Filter, Page, Sort]} />\n                </GridComponent>\n            </div>\n\n        </div>\n    )\n}\nexport default Filtering;"
    }
  ]
}