Lattice Grid Buy a licence

demo D114

Your own theme

Overriding tokens rather than rules

--lattice-* tokens

Building…
Loading a live grid…

The configuration

<script>
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/svelte.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  const config = {
    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 below 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>

<svelte:head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.min.css">
  <!-- 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 when a
       grid class is renamed; only the root's tokens are set. Global rather
       than the component's scoped styles, so the attribute selector reaches
       the grid the grid builds. -->
  <style>
    .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>
</svelte:head>

<div use:lattice={config} style="height: 540px"></div>

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