DataGrid Search

Search DataGrid data globally, by column, through advanced rules, or with reusable highlight widgets.

Search

Built-in global search across all visible grid columns

Loading interactive DataGrid example…

Showing 500 of 500 rows

Code snippet

Grid example - component setup and template binding

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

@Component({
  standalone: true,
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="employees"
      [enableFiltering]="true"
      [filterable]="'none'"
      [enableGlobalFilter]="true"
      globalFilterPlaceholder="Search across all columns..."
      (filtersChange)="searchState = $event"
    ></ngb-datagrid>
  `,
})
export class EmployeeBasicSearchDemo {
  searchState: { global: string; columns: Record<string, string> } | null = null;

  readonly columns: ColumnDef<Employee>[] = [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email', type: 'email' },
    { field: 'department', header: 'Department' },
    { field: 'salary', header: 'Salary', type: 'number' },
  ];

  readonly employees = employeeRows;
}

API notes - key inputs, outputs, and column properties

      // Basic search API
enableFiltering = true;
filterable = 'none';
enableGlobalFilter = true;
globalFilterPlaceholder = 'Search across all columns...';

onFiltersChange(event: { global: string; columns: Record<string, string> }): void {
  // event.global contains the toolbar search text.
}

API Information

Property	Type	Default	Description
`enableFiltering`	`boolean`	`-`	Enables the filtering/search pipeline used by the grid.
`filterable`	`"none"`	`-`	Keeps column filter UI hidden while allowing global search to run.
`enableGlobalFilter`	`boolean`	`-`	Shows the built-in toolbar search field.
`globalFilterPlaceholder`	`string`	`-`	Customizes placeholder text for the global search input.
`filtersChange`	`EventEmitter<{ global; columns }>`	`-`	Emits global search text and legacy column filter values.