# grid-default-filtering

> Data grid with dropdown-driven Excel filter plus toggleable filter-bar operator checkbox.

**Framework:** javascript  **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/javascript/grid-default-filtering.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-grids
```

**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/default-filtering.html

```html
<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        <div id="Grid">
        </div>
    </div>
</div>

<div class="col-lg-3 property-section">
    <table id="property" title="Properties" style="width: 100%">
        <tr>
            <td style="width: 70%">
                <div>Enable Filterbar Operator</div>
            </td>
            <td style="width: 30%;padding:10px 10px 10px 0px">
                <div>
                    <input type="checkbox" tabindex="0" id='filterBarOperator' aria-label="Enable Filterbar Operator"/>
                </div>
            </td>
        </tr>
    </table>
</div>

```

### src/components/grid-default-filtering/default-filtering.ts

```typescript
import { Grid, Filter, Page, Selection, Sort } from '@syncfusion/ej2-grids';
import { categoryData } from '../data-source';
import { CheckBox } from '@syncfusion/ej2-buttons';

Grid.Inject(Filter, Page, Selection, Sort);

/**
 * Filtering sample
 */
(window as any).default = (): void => {
    let grid: Grid = new Grid(
        {
            dataSource: categoryData,
            allowPaging: true,
            allowFiltering: true,
            allowSorting: true,
            columns: [
                { field: 'CategoryName', headerText: 'Category Name', width: 150 },
                { field: 'ProductName', headerText: 'Product Name', width: 150 },
                { field: 'UnitsInStock', headerText: 'Units In Stock', width: 150, textAlign: 'Right' },
                {
                    field: 'Discontinued', headerText: 'Discontinued', width: 150,
                    textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'
                }
            ],
            pageSettings: { pageCount: 5 }
        });
    grid.appendTo('#Grid');

    let filterbarOperator: CheckBox = new CheckBox();
    filterbarOperator.appendTo('#filterBarOperator');

    document.getElementById('filterBarOperator')!.onclick = () => {
        if (filterbarOperator.checked) {
            grid.filterSettings.showFilterBarOperator = true;
        } else {
            grid.filterSettings.showFilterBarOperator = false;
        }
        grid.clearFiltering();
    };
};

```