demo D57
Quick Filter and Global Search: Four Match Modes in Angular
contains, words, fuzzy and regex over the same box
filters.quick(text, { mode })
This grid narrows rows as you type into one search box, with a choice of contains, whole words, fuzzy and regex matching. It serves people who know roughly what they are after, without naming a column or opening a menu first.
This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.
The configuration
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';
// The quick panel gives one box that matches across every column at once.
// quickFilter seeds the opening term; clearing the box shows every row again.
const columns = [
{ field: 'service', title: 'Service', layout: { width: 150 } },
{ field: 'team', title: 'Team' },
{ field: 'owner', title: 'Owner' },
{ field: 'region', title: 'Region' },
{ field: 'repository', title: 'Repository', layout: { flex: 1, min: 200 } },
{ field: 'instances', title: 'Instances', type: 'number' },
];
const rows = [/* 2,000 service records */];
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template: '<lattice-grid [config]="grid" [quickFilter]="quickFilter" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
grid = {
rowKey: 'id',
toolPanel: { side: 'left', panels: ['quick', 'filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
columns: columns,
rows: rows,
};
// [quickFilter] takes the query with its match mode; the mode is reachable
// only this way. The four modes each behave differently over the same page:
// { text: 'plat', mode: 'contains' }
// { text: 'plat', mode: 'words' }
// { text: 'pltfrm', mode: 'fuzzy' }
quickFilter = { text: 'plat|ident', mode: 'regex' };
}
bootstrapApplication(AppComponent, {
providers: [provideLattice({ createGrid })],
});Free-text quick filtering across every visible column
A quick filter is the search box above a JavaScript data grid that narrows rows as a user types, without naming a column or opening a filter menu first. Reach for it whenever a table serves people who know roughly what they are looking for but not which column holds it: a support queue searched by customer name, ticket number, or note text at once, or a parts list searched by code or description. Lattice Grid exposes four matching strategies through filters.quick(text, { mode }): contains for a plain substring match, words to require each typed word independently regardless of order, fuzzy to tolerate a transposed letter or a missing character, and regex for a pattern typed straight into the box. Switching mode does not change what is indexed, so a user moving from a loose word search to a precise regex scans the same row set, not a second pass over different data. Matching runs against the rendered cell values already produced by each column’s formatter, so a currency column matches on “£1,200” as displayed, not the raw number. Because the filter narrows the row list rather than hiding cells, virtual scrolling still renders only the rows in view, so typing into the box on a hundred-thousand-row grid recomputes the match set without a drop in scroll frame rate.
How do you add a search box that filters a data grid as you type?
Call filters.quick(text, { mode }) with the current input value on every keystroke, passing contains, words, fuzzy, or regex as the mode. Lattice Grid matches against each row’s rendered cell text across all visible columns and updates the row list in place, so no column configuration is required before the box works.