{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-default-filtering",
  "framework": "javascript",
  "type": "registry:component",
  "component": "Grid",
  "variant": "default-filtering",
  "dependencies": [
    "@syncfusion/ej2-grids"
  ],
  "description": "Data grid with dropdown-driven Excel filter plus toggleable filter-bar operator checkbox.",
  "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/javascript/llms.txt",
    "skillPack": "syncfusion/javascript-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/javascript/grid-default-filtering.md"
  },
  "files": [
    {
      "target": "src/components/grid-default-filtering/default-filtering.html",
      "content": "<div class=\"col-lg-9 control-section\">\n    <div class=\"content-wrapper\">\n        <div id=\"Grid\">\n        </div>\n    </div>\n</div>\n\n\n<div class=\"col-lg-3 property-section\">\n    <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n        <tr>\n            <td style=\"width: 70%\">\n                <div>Enable Filterbar Operator</div>\n            </td>\n            <td style=\"width: 30%;padding:10px 10px 10px 0px\">\n                <div>\n                    <input type=\"checkbox\" tabindex=\"0\" id='filterBarOperator' aria-label=\"Enable Filterbar Operator\"/>\n                </div>\n            </td>\n        </tr>\n    </table>\n</div>\n"
    },
    {
      "target": "src/components/grid-default-filtering/default-filtering.ts",
      "content": "import { Grid, Filter, Page, Selection, Sort } from '@syncfusion/ej2-grids';\nimport { categoryData } from '../data-source';\nimport { CheckBox } from '@syncfusion/ej2-buttons';\n\nGrid.Inject(Filter, Page, Selection, Sort);\n\n/**\n * Filtering sample\n */\n(window as any).default = (): void => {\n    let grid: Grid = new Grid(\n        {\n            dataSource: categoryData,\n            allowPaging: true,\n            allowFiltering: true,\n            allowSorting: true,\n            columns: [\n                { field: 'CategoryName', headerText: 'Category Name', width: 150 },\n                { field: 'ProductName', headerText: 'Product Name', width: 150 },\n                { field: 'UnitsInStock', headerText: 'Units In Stock', width: 150, textAlign: 'Right' },\n                {\n                    field: 'Discontinued', headerText: 'Discontinued', width: 150,\n                    textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'\n                }\n            ],\n            pageSettings: { pageCount: 5 }\n        });\n    grid.appendTo('#Grid');\n\n    let filterbarOperator: CheckBox = new CheckBox();\n    filterbarOperator.appendTo('#filterBarOperator');\n\n    document.getElementById('filterBarOperator')!.onclick = () => {\n        if (filterbarOperator.checked) {\n            grid.filterSettings.showFilterBarOperator = true;\n        } else {\n            grid.filterSettings.showFilterBarOperator = false;\n        }\n        grid.clearFiltering();\n    };\n};\n"
    }
  ]
}