demo D57
Quick filter, four ways
contains, words, fuzzy and regex over the same box
filters.quick(text, { mode })
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
toolPanel: { side: 'left', panels: ['quick', 'filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
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' },
],
rows, // 2,000 service records
});
// filters.quick() sets both the query and the match mode; the mode is
// reachable only through this call. The four modes each behave differently
// over the same page of data.
grid.filters.quick('plat', { mode: 'contains' });
grid.filters.quick('plat', { mode: 'words' });
grid.filters.quick('pltfrm', { mode: 'fuzzy' });
grid.filters.quick('plat|ident', { mode: 'regex' });
</script>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.