Lattice Grid Buy a licence

demo D111

Four themes, one grid

Light, dark, high contrast and terminal, switched live

theme: 'high-contrast'

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>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    theme: 'dark',
    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>

Switching themes live in a JavaScript data grid

A theme in Lattice Grid is a named set of design tokens, not a separate build, so light, dark, high contrast and terminal all ship in the one grid and switch at runtime with no reflow of the underlying rows. Reach for this when an application already has its own theme switcher and the grid needs to follow it, when a dashboard runs on a wall-mounted screen in dark mode all day, or when a user with low vision needs high contrast without leaving the page. The theme option takes a value such as theme: 'high-contrast', and changing it re-points the grid’s CSS custom properties rather than rebuilding the DOM, so a grid holding a hundred thousand rows changes appearance in one frame regardless of how much data is loaded. Terminal is the fourth theme rather than a variant of dark: one hue, monospaced, status conveyed by brightness rather than colour, built for consoles and log-style views where colour alone is not the signal.

Because every theme resolves to the same token set, a custom theme built by overriding --lattice-* variables inherits the same switching behaviour, and a screen reader user gets identical ARIA output regardless of which of the four is active, since the change is visual only and never touches the accessibility tree.

How do I switch a JavaScript data grid between light, dark and high-contrast themes?

Set the theme option to 'light', 'dark', 'high-contrast' or 'terminal', either at creation or at any point afterwards. Lattice Grid applies the change by updating its token set in place, so the grid re-renders in the new theme without discarding scroll position, selection or sort state.

Related demos