# grid-default-filtering
> Data grid bound to a category list with a dropdown-driven filter and toggleable filter-bar operator.
**Framework:** angular **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/angular/grid-default-filtering.json
```
**Install Package(s)**
```bash
npm install @syncfusion/ej2-angular-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/filter.style.css
```css
.select-wrap {
padding: 0 0 10px 0;
font-family: Roboto;
padding: 1em;
display: inline-block;
}
.select-wrap .e-ddl.e-input-group .e-ddl-hidden {
width: 0;
}
.select-wrap select {
height: 28px;
width: 100%;
border-width: 0 0 2px 0;
background: transparent;
}
.select-wrap select:focus {
border-bottom-style: solid;
border-color: #ff4081;
}
.select-wrap select,
.select-wrap select option {
outline: none;
font-size: 14px;
padding: .2em;
height: 30px;
}
@media (min-width: 480px) and (max-width:639px) {
.select-wrap {
width: 40%
}
}
@media (min-width:640px) {
.select-wrap {
width: 25%
}
}
```
### src/components/grid-default-filtering/filtering.component.ts
```typescript
import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { categoryData } from '../data';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { FilterService, SortService, GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';
import { CheckBoxComponent, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
@Component({
selector: 'ej2-gridfilter',
templateUrl: 'filtering.html',
styleUrls: ['filter.style.css'],
providers: [FilterService, SortService, PageService],
standalone: true,
imports: [DropDownListModule, GridModule, CheckBoxModule]
})
export class FilterComponent implements OnInit {
public data!: Object[];
public ddldata!: Object[];
public pageOptions!: Object;
public category!: string[];
@ViewChild('grid')
public grid!: GridComponent;
@ViewChild('checkbox')
public checkbox!: CheckBoxComponent;
public ngOnInit(): void {
this.data = categoryData;
this.pageOptions = { pageSize: 10, pageCount: 5 };
this.category = ['All', 'Beverages', 'Condiments', 'Confections', 'Dairy Products', 'Grains/Cereals',
'Meat/Poultry', 'Produce', 'Seafood'];
this.ddldata = this.category;
}
public onChange(e: ChangeEventArgs): void {
if (e.value === 'All') {
this.grid.clearFiltering();
} else {
this.grid.filterByColumn('CategoryName', 'equal', e.value as any);
}
}
public checkboxChange(e: any): void {
if (e.checked) {
this.grid.filterSettings.showFilterBarOperator = true;
} else {
this.grid.filterSettings.showFilterBarOperator = false;
}
}
}
```
### src/components/grid-default-filtering/filtering.html
```html
```