Lattice Grid Buy a licence

demo D114

Your own theme

Overriding tokens rather than rules

--lattice-* tokens

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>

<style>
  /* A theme of your own is a name plus a block of tokens scoped to
     data-theme. No rule mentions a grid class, so nothing breaks on a
     release that renames one; only the root's tokens are set. */
  .lattice[data-theme="blueprint"] {
    --lattice-background: #0d2137;
    --lattice-surface: #10293f;
    --lattice-surface-alt: #14314b;
    --lattice-surface-sunken: #0a1b2d;
    --lattice-foreground: #d7e9ff;
    --lattice-foreground-muted: #8fb4d6;
    --lattice-muted-text: #8fb4d6;
    --lattice-border-color: #2f5f8a;
    --lattice-border-strong: #4b86bd;
    --lattice-header-foreground: #ffd166;
    --lattice-header-font-weight: 600;
    --lattice-accent: #ffd166;
    --lattice-accent-contrast: #0d2137;
    --lattice-selected-background: #1d4d73;
    --lattice-selected-foreground: #ffffff;
    --lattice-hovered-background: #16395a;
    --lattice-focus-color: #ffd166;
    --lattice-font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    --lattice-link-color: #7fd1ff;
  }
</style>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    // Not a shipped theme. The name is arbitrary; what makes it work is that
    // the grid writes it to data-theme and the tokens above are scoped to
    // that attribute.
    theme: 'blueprint',
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
      { field: 'team', title: 'Team', filter: { type: 'set' } },
      { field: 'owner', title: 'Owner', filter: { type: 'set' } },
      { field: 'tier', title: 'Tier', cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
      { field: 'state', title: 'State', cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'active', title: 'Active', type: 'boolean' },
      { field: 'deprecated', title: 'Deprecated', type: 'boolean' },
      { field: 'version', title: 'Version', layout: { width: 100 } },
    ],
    rows,  // 5,000 service records
  });
</script>

Restyling a grid with CSS custom properties instead of overriding rules

Theming through tokens means every colour, spacing and border in the grid is exposed as a --lattice-* custom property rather than baked into a fixed stylesheet a developer has to fight with specificity. A team reaches for this when the grid needs to sit inside an existing design system: matching a brand’s row background, accent colour and border radius without shipping a parallel set of override rules that drift out of sync each time the base styles change. Lattice Grid reads its --lattice-* tokens at render time, so setting a handful of custom properties on a container repaints header, row and cell styling across the whole JavaScript data grid in one pass, inheriting and cascading the way any other custom property does. The tokens resolve through the browser’s own cascade rather than through JavaScript recalculating styles, so changing a value costs a repaint, not a re-render, and a theme switch on a grid holding tens of thousands of rows does not touch the DOM the rows are drawn into. Tokens cover contrast-sensitive pairs together, such as a row background and its text colour, so a custom palette can still meet WCAG contrast ratios rather than produce pale text on a pale row. The same mechanism underlies the grid’s built-in themes, sitting alongside them rather than as a separate styling system.

How do I change a data grid’s colours without overriding its CSS rules?

Set the grid’s --lattice-* custom properties on a containing element instead of writing rules against its internal classes. Lattice Grid reads these tokens for header, row, border and accent colours at render time, so updating a property repaints the relevant elements without a rebuild step or a parallel stylesheet to maintain, and the values keep cascading the way standard CSS custom properties do.

Related demos