DataGrid Column Search

Use DataGrid row filtering as column-specific search with horizontal scroll support for wide schemas.

Search

Independent per-column filter inputs. Type in any column header field to filter that column independently. Columns with active filters are combined with AND logic.

Showing 500 of 500 rows

Code snippet

Grid example - component setup and template binding

      import { Component } from '@angular/core';
import {
  ColumnDef,
  Datagrid,
  NgbCompositeFilterDescriptor,
} from '@angular-bootstrap/ngbootstrap';

@Component({
  standalone: true,
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="employees"
      [enableFiltering]="true"
      [filterable]="'row'"
      [enableGlobalFilter]="false"
      [filter]="filter"
      (filterChange)="filter = $event"
    ></ngb-datagrid>
  `,
})
export class EmployeeColumnSearchDemo {
  filter: NgbCompositeFilterDescriptor = { logic: 'and', filters: [] };

  readonly columns: ColumnDef<Employee>[] = [
    { field: 'name', header: 'Name', filterable: true, filterPlaceholder: 'Filter...', width: 240 },
    { field: 'email', header: 'Email', type: 'email', filterable: true, filterPlaceholder: 'Filter...', width: 300 },
    { field: 'department', header: 'Department', filterable: true, filterPlaceholder: 'Filter...', width: 220 },
    { field: 'salary', header: 'Salary', type: 'number', filterable: true, filterPlaceholder: 'Filter...', width: 180 },
    { field: 'joinDate', header: 'Join Date', type: 'date', filterable: true, width: 200 },
  ];

  readonly employees = employeeRows;
}

API notes - key inputs, outputs, and column properties

      // Column search API
filterable = 'row';

// ColumnDef properties used by row filters
{
  field: 'salary',
  header: 'Salary',
  type: 'number',
  filterable: true,
  filterPlaceholder: 'Filter...',
  defaultFilterOperator: 'eq',
  allowedFilterOperators: ['eq', 'neq', 'gte', 'gt', 'lte', 'lt'],
  showFilterOperator: true,
  showFilterRow: true,
  width: 180
}

API Information

Property	Type	Default	Description
`enableFiltering`	`boolean`	`-`	Enables the filtering pipeline.
`filterable`	`"row"`	`-`	Renders the filter row with one input per filterable column.
`ColumnDef.filterable`	`boolean`	`-`	Allows a column to participate in column search.
`ColumnDef.type`	`ColumnType`	`-`	Selects the correct editor and operator list for the column.
`ColumnDef.filterPlaceholder`	`string`	`-`	Sets placeholder text inside the row filter input.
`ColumnDef.width`	`number`	`-`	Provides enough fixed width for readable filter controls and horizontal scrolling.
`filter`	`NgbCompositeFilterDescriptor`	`-`	Optional controlled descriptor state for the grid filters.
`filterChange`	`EventEmitter<NgbCompositeFilterDescriptor>`	`-`	Emits descriptor changes when a column filter changes.