Lattice Grid Buy a licence

demo D54

The filter menu

Per-column filtering with the operators each type supports

filters.set(tree)

Building…
Loading a live grid…

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>
  // Every column carries a filter, so the header menu offers the kind that
  // fits its type: text, set, number or date.
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    toolPanel: { side: 'left', panels: ['filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 }, filter: true },
      { field: 'team', title: 'Team', filter: true },
      { field: 'owner', title: 'Owner', filter: true },
      { field: 'tier', title: 'Tier', cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } }, filter: true },
      { field: 'state', title: 'State', cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } }, filter: true },
      { field: 'region', title: 'Region', filter: true },
      { field: 'active', title: 'Active', type: 'boolean', filter: true },
      { field: 'deprecated', title: 'Deprecated', type: 'boolean', filter: true },
      { field: 'version', title: 'Version', layout: { width: 100 }, filter: true },
      { field: 'instances', title: 'Instances', type: 'number', filter: true },
      { field: 'cpuCores', title: 'vCPU', type: 'number', filter: true },
      { field: 'memoryGb', title: 'Memory GB', type: 'number', filter: true },
    ],
    rows,  // 20,000 service records
  });
</script>

Per-column filtering with type-aware operators

A filter menu is the default way a user narrows a table without leaving the grid: click a header’s filter icon, and a panel opens with the operators that make sense for that column’s data. A JavaScript data grid handling mixed content needs this to be type-aware rather than one generic text box, since “contains” is the right default for a name column, “between” for a price column, and “is after” for a date column. Lattice Grid infers the operator set from the column’s declared type, then falls back to a text-contains filter for anything undeclared, so the menu never offers a numeric range on a string field.

The filters.set(tree) call applies a filter programmatically, taking the same tree structure the menu builds when a user picks conditions and combines them with AND or NOR. Passing a tree through this call and opening the menu afterwards shows the equivalent conditions already selected, so the UI and the API stay in sync. Filtering runs against the underlying row model rather than the rendered DOM, so narrowing a column on a dataset with hundreds of thousands of rows does not require re-measuring rows that stay hidden. Each filter menu is keyboard-reachable: Enter on a header’s filter icon opens the panel, and focus moves straight to the first operator control.

How do you filter a column programmatically instead of through the menu UI?

Call filters.set(tree) with a condition tree matching the column you want to filter, using the same field names and operators the filter menu itself produces. The grid applies it immediately and reflects the same state back in the menu if a user opens it, so a saved filter or a URL parameter can drive the table without simulating clicks.

Related demos