# grid-default-filtering

> Data grid filters records with a category dropdown and a filterbar-operator toggle.

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

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-buttons @syncfusion/ej2-vue-dropdowns @syncfusion/ej2-vue-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/Grid.vue

```vue
<template>
<div>
<div class="col-lg-9 control-section">
    <div>
        <div class="select-wrap" style="width: fit-content">
            <ejs-dropdownlist id='ddlelement' :dataSource='ddldata' placeholder='Select category to filter' :change="onChange"></ejs-dropdownlist>
        </div>

        <ejs-grid ref='grid' :dataSource="data" :allowPaging='true' :allowSorting='true' :allowFiltering='true' :pageSettings="pageOptions">
            <e-columns>
                <e-column field='CategoryName' headerText='Category Name' width='150'></e-column>
                <e-column field='ProductName' headerText='Product Name' width='150'></e-column>
                <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></e-column>
                <e-column field='Discontinued' headerText='Discontinued' width='150' textAlign='Center' displayAsCheckBox='true' type='boolean'></e-column>
            </e-columns>
        </ejs-grid>
    </div>

</div>

<div class="col-lg-3 property-section">
    <table id="property" title="Properties" style="width: 100%">
        <tr>
            <div class="checkbox-control" style="padding-left: 0px">
                <div class="row" style="padding-left: 5px">
                    <ejs-checkbox label='Enable Filterbar Operator' labelPosition='Before' :change="filterbaroperator"></ejs-checkbox>
                 </div>
            </div>
        </tr>
    </table>
</div>
</div>
</template>
<script lang="ts">
import { GridComponent, ColumnDirective, ColumnsDirective, Filter, Page, Sort } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent} from "@syncfusion/ej2-vue-dropdowns";
import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";

const categoryData = [
    {
        "CategoryName": "Beverages",
        'ProductID': 1,
        'ProductName': 'Chai',
        'SupplierID': 1,
        'QuantityPerUnit': '10 boxes x 20 bags',
        'UnitPrice': 18.00,
        'UnitsInStock': 39,
        'Discontinued': true
    },
    {
        "CategoryName": "Beverages",
        'ProductID': 2,
        'ProductName': 'Chang',
        'SupplierID': 1,
        'QuantityPerUnit': '24 - 12 oz bottles',
        'UnitPrice': 19.00,
        'UnitsInStock': 17,
        'Discontinued': true
    },
    {
        "CategoryName": "Beverages",
        'ProductID': 3,
        'ProductName': 'Aniseed Syrup',
        'SupplierID': 1,
        'QuantityPerUnit': '12 - 550 ml bottles',
        'UnitPrice': 10.00,
        'UnitsInStock': 13,
        'Discontinued': true
    },
    {
        "CategoryName": "Beverages",
        'ProductID': 4,
        'ProductName': 'Chef Anton\'s Cajun Seasoning',
        'SupplierID': 2,
        'QuantityPerUnit': '48 - 6 oz jars',
        'UnitPrice': 22.00,
        'UnitsInStock': 53,
        'Discontinued': true
    },
    {
        "CategoryName": "Beverages",
        'ProductID': 5,
        'ProductName': 'Chef Anton\'s Gumbo Mix',
        'SupplierID': 2,
        'QuantityPerUnit': '36 boxes',
        'UnitPrice': 21.35,
        'UnitsInStock': 0,
        'Discontinued': true
    },
    {
        "CategoryName": "Beverages",
        'ProductID': 6,
        'ProductName': 'Grandma\'s Boysenberry Spread',
        'SupplierID': 3,
        'QuantityPerUnit': '12 - 8 oz jars',
        'UnitPrice': 25.00,
        'UnitsInStock': 120,
        'Discontinued': false
    },
    {
        "CategoryName": "Beverages",
        'ProductID': 7,
        'ProductName': 'Uncle Bob\'s Organic Dried Pears',
        'SupplierID': 3,
        'QuantityPerUnit': '12 - 1 lb pkgs.',
        'UnitPrice': 30.00,
        'UnitsInStock': 15,
        'Discontinued': false
    },
    {
        "CategoryName": "Beverages",
        'ProductID': 8,
        'ProductName': 'Northwoods Cranberry Sauce',
        'SupplierID': 3,
        'QuantityPerUnit': '12 - 12 oz jars',
        'UnitPrice': 40.00,
        'UnitsInStock': 6,
        'Discontinued': false
    }
];

export default {
  components: {
    'ejs-grid': GridComponent,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective,
    'ejs-dropdownlist': DropDownListComponent,
    'ejs-checkbox': CheckBoxComponent
  },
  data: () => {
    return {
      data: categoryData,
      pageOptions: { pageSize: 10, pageCount: 5 },
      ddldata: ['All', 'Beverages', 'Condiments', 'Confections', 'Dairy Products', 'Grains/Cereals',
            'Meat/Poultry', 'Produce', 'Seafood']
    };
  },
  methods: {
      onChange: function(e: ChangeEventArgs): void {
        if (e.value === 'All') {
            ((this as any).$refs.grid).clearFiltering();
        } else {
            ((this as any).$refs.grid).filterByColumn('CategoryName', 'equal', e.value);
        }
    },
    filterbaroperator: function(args: any): void {
        let grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]
            if (args.checked) {
                 grid.filterSettings.showFilterBarOperator = true;
            } else {
                grid.filterSettings.showFilterBarOperator = false;
      }
    }
  },
  provide: {
      grid: [Filter, Page, Sort]
  }
}
</script>
```

### src/components/grid-default-filtering/GridView.vue

```vue
<template>
  <Grid />
</template>

<script setup>
import Grid from '../../components/Grid.vue'
</script>
```