Lattice Grid 1.74: one dark switch, many values in a cell, deck.gl

A dashboard is never just a grid. It is a grid inside a window, beside a chart, above a strip of KPI tiles, and a reader who asks for dark mode wants all of it dark at once, not a table that switched while its frame stayed lit up around it. This release makes that one switch, adds a column type for data that was never really one value, and lets deck.gl draw straight from the grid’s own rows.

One switch, the whole dashboard

Set theme: 'auto' and the grid, its window frame, a chart, a KPI strip, an alarms panel, tabs, a kanban board and a gantt chart all follow the desktop together. Set theme: 'dark' anywhere and everything under it goes dark with it. A window’s title bar only darkens when you ask for that, so a dashboard that has never touched theming keeps its current light look unless you opt it in.

Many values in one cell, each one still filterable

A list column holds several values in one cell, drawn as chips with an overflow count and a tooltip, edited with a token editor that adds one on Enter and removes one on Backspace. Every ordinary filter still matches a row where any item matches, and four further operators ask about the list as a whole: hasAny, hasAll, hasNone and a count. Point the DuckDB adapter at a LIST column and the same filtering runs in the database.

grid.filters.set({ col: 'channels', op: 'hasAll', value: ['web', 'wholesale'] });

deck.gl, drawing straight from the grid

bindDeck makes a deck.gl layer one more viewer of the grid: your own layers function is handed exactly the rows the grid shows, redraws as they change, and turning on the viewport filter writes the map’s own pan and zoom back onto the grid, the same way the built-in maps already do. Nothing of deck.gl is imported by the grid, and nothing of the grid is imported by deck.gl; bindDeck is the one connection between them.

Price and volume, one pane

A candlestick chart now takes a volume column and draws a synchronised volume pane underneath the price, on the same x axis, with one tooltip and one zoom gesture across both.

createChart({ grid, container, type: 'candlestick', x: 'day', measures: [...], volume: 'volume' });

See it running

One theme switch reaching a whole dashboard, chips and hasAll filtering over a product catalogue, deck.gl drawing straight from the grid over a real basemap, and a candlestick with its own volume pane are all running on this site. The theming guide covers the three switches in full, and the deck.gl guide and lists guide cover the rest.

The full list is in the changelog.