Data grid theming: 4 presets, dark mode, 1.103

If you are choosing a JavaScript data grid and UI library, the grid is rarely what decides it. What decides it is the screen next to the grid. The form that edits the row, the Gantt that plans the work, the chart in the corner, all of which have to look like the design system your company already ships. A grid that matches and a form that does not is a theming project you now own.

This release closes that gap. Four presets and dark mode now reach every view, and four new form controls arrive in the same form you already load. Every example below is live. The one at the top switches a single page of four views between the presets and between light and dark. Try them in turn.

Why one token contract across every view matters

A theme is a list of decisions: the accent, the surfaces, the corner radius, the type, the row height, the header weight. When each view keeps its own list, a rebrand is a list per view, and a dark mode is a list per view again. The lists drift. The calendar is the wrong grey in dark, the chart legend is unreadable on the preset’s surface, and nobody notices until a customer does.

Here the grid, form, Gantt, Kanban board, calendar, scheduler, Designer, shell, charts, KPI tiles and map view draw from the same tokens. One theme setting. One dark mode. One preset stylesheet that restyles all of them. Change a token and the whole product follows, because there is only one place the decision lives. A form that sits beside a grid reads that grid’s theme, so you do not restate it. A dark form on a light page paints its own surface, so its labels stay readable.

Four presets and dark mode, on one page

Each preset is a second stylesheet loaded after the core one. It carries colour, radius, type and shape: its own row height, header weight and dividers, not only a new accent. Pick a preset above, then flip light and dark. The grid, form, Gantt and chart all change together, and the readout shows the accent the browser resolves right now.

<link rel="stylesheet" href="lattice-grid.css">
<link rel="stylesheet" href="modules/presets/preset.css">
<div data-theme="dark"> <!-- grid, form, Gantt, chart --> </div>

The full list of presets, with the numbers each one sets, is on the presets page.

Chart palettes and a Gantt export that matches

A chart takes its series colours from the preset, so a bar chart under one preset is not drawn in another’s colours. Switch the demo above and watch the bars move with the grid beside them. Colours you set in a chart’s own config are data, and no theme changes them. That is deliberate: a red series that means “late” stays red in every preset.

The Gantt export follows the same rule. What you export matches the theme on screen, so the plan you send is the plan you were looking at. The Gantt page covers the export in full.

A content container that hosts a grid

Some forms are mostly one big table with a few fields around it. The content container is a form item that shows your own HTML, or hosts another view attached after the form is created. Below, an order form carries an editable grid of lines inside it. Edit a quantity.

const slot = form.getItem('lines');
slot.attach(createGrid(document.createElement('div'), { rowKey: 'id', columns, rows }));

An avatar with a picked picture and a remove control

A profile picture field in the shape people expect. It comes in sizes, can be a circle, shows a fallback when empty, and takes a picture by click, by keyboard or by drag and drop. A small cross removes it. An optional upload sends the file for you. Click the picture to choose another, then remove it.

A toggle group, single and multiple

One two-state button per option. Exclusive, it behaves like a segmented control: pressing one releases the others. Independent, any button can be on. The value is a map of option to pressed state, so reading it back needs no parsing. Arrow keys move between the buttons.

A time field in 12-hour mode, with Save and Close

A clock picker under its own control type. Show 12 or 24 hours, type the time or pick it, and add Save and Close buttons so a half-finished pick never reaches your state. Below it runs in 12-hour mode with AM and PM. Open the picker, change the time, then try Close and Save in turn.

Upgrade

One install brings all of it:

npm install @toclocoinc/lattice-grid

The presets page lists what each preset sets, the form page lists every control, and the changelog has the full set of changes.