Lattice Grid Buy a licence

demo D111

Four themes, one grid in htmx

Light, dark, high contrast and terminal, switched live

theme: 'high-contrast'

This grid switches between light, dark, high contrast and terminal themes live, with no rebuild and no reflow of the rows. It shows that a theme is a set of tokens rather than a separate build, so an app can offer all four from the one grid.

Building…
Loading a live grid…

This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="four-themes-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="service">Service</th>
      <th data-field="team">Team</th>
      <th data-field="owner">Owner</th>
      <th data-field="region">Region</th>
      <th data-field="active">Active</th>
      <th data-field="deprecated">Deprecated</th>
      <th data-field="version">Version</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>svc-00001</td><td>Search</td><td>k.yilmaz</td><td>Malmö</td><td>false</td><td>false</td><td>1.2.10</td></tr>
    <tr data-id="2"><td>svc-00002</td><td>Mobile</td><td>m.svensson</td><td>Leeds</td><td>true</td><td>false</td><td>2.3.6</td></tr>
    <tr data-id="3"><td>svc-00003</td><td>Identity</td><td>j.okafor</td><td>Zürich</td><td>true</td><td>false</td><td>1.11.1</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('four-themes-table'), {
    selection: 'multiple',
    // theme names the palette. Four ship ready to use: light, dark,
    // high-contrast and terminal.
    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 } },
    ],
  });
</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