Lattice Grid Buy a licence

demo D55

Set filters in Angular

Checkbox lists over distinct values, on a dictionary-encoded column

filter: 'set'

This grid presents a column's distinct values as a checkbox list, the pattern spreadsheet users already know. It lets a reader tick the categories they want from a column of statuses or regions, and stays fast because the column is dictionary-encoded.

Building…
Loading a live grid…

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';

// A set filter lists the values a column actually holds and ticks the ones to
// keep, so a column with a handful of distinct values filters by choosing from
// a menu rather than typing.
const columns = [
  { field: 'account', title: 'Account', filter: { type: 'set' } },
  { field: 'service', title: 'Service', filter: { type: 'set' } },
  { field: 'resource', title: 'Resource', layout: { flex: 1, min: 200, max: 320 } },
  { field: 'region', title: 'Region', filter: { type: 'set' } },
  { field: 'environment', title: 'Env', filter: { type: 'set' },
    cell: { decoration: 'pill', variant: { map: {
      prod: 'danger', 'prod-2': 'danger', 'definitely-prod': 'danger',
      staging: 'warning', untagged: 'warning', test: 'info',
      dev: 'success', 'not-prod': 'neutral',
    } } } },
  { field: 'change', title: 'Change', type: 'number',
    layout: { width: 140, min: 140 }, format: { style: 'percent', decimals: 1 } },
  { field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
    format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
];

const rows = [/* cloud cost records, one object per resource */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    rowKey: 'id',
    toolPanel: { side: 'left', panels: ['filters', 'columns'], actions: ['restore'], exportName: 'lattice-demo' },
    columns: columns,
    rows: rows,
  };
}

bootstrapApplication(AppComponent, {
  providers: [provideLattice({ createGrid })],
});

Filtering a column by its distinct values with checkbox set filters

A set filter presents every distinct value in a column as a checkbox list, the pattern most spreadsheet users already know from filtering a column of statuses, categories or regions. In Lattice Grid it is one of the operators the filter menu offers per column, switched on with filter: 'set', and it reads best against a column with a small, bounded number of distinct values rather than free text or continuous numbers. A developer reaches for it wherever a column is effectively an enumeration: order status, region, department, priority. The column backing a set filter is dictionary-encoded, meaning each distinct string is stored once and rows hold a small integer reference to it, so building the checkbox list is a lookup over the dictionary rather than a scan of every row, and toggling a value re-evaluates the filter against those integer references instead of comparing strings. That keeps the list responsive on a column with a few hundred thousand rows behind it, in a JavaScript data grid where the filter menu has to open and populate within a frame to feel attached to the click that opened it. The checkbox list is keyboard-navigable and each entry is a labelled checkbox, so a screen reader announces the option and its checked state without extra markup from the host application.

How do I filter a column by a list of checked values?

Set filter: 'set' on the column definition. Lattice Grid builds the checkbox list from the column’s distinct values automatically, so no list of options needs to be supplied separately, and the result composes with any other filter already applied to the grid. See the step-by-step how to add a set filter to a column guide for a runnable example and the source on GitHub.

Related demos