Lattice Grid Buy a licence

demos

JavaScript Data Grid Demos

Every feature, running. 312 demos, one feature each, and every one is the real product generating its data in your browser from a fixed seed, so sorting, filtering and editing all do what they would do in your application. Nothing here is a video or a screenshot.

Want a whole application rather than one feature? See the showcase - real public datasets, live, in their own open-source repos.

Start here

Eight demos worth your first five minutes. The rest are below, by the job you came to do.

Then these

Find a demo

Search by name, or jump to the part of the grid you are working on.

Start here

The shortest path from an empty page to a working grid, and the screens it ends up inside.

Getting started

The first ninety seconds. Each of these is readable in full without scrolling the code.

Fit it into your product UI

The same grid dressed as the product screens it ends up inside, styled through the theme's own tokens rather than against them.

Columns, types and rows

The shape of the grid: what a column holds, how a value is stored and read, and what a row can be.

Columns

Structure and geometry. Several of these are the reason to choose a grid over a table.

Types and formatting

A type is not a label. It is storage, comparison, parsing, formatting and an editor.

Rows and layout

What a row is, how tall it is, and what sits outside the scrolling body.

Sort, filter, group and edit

Everything a person does to the data once it is on screen, from finding a row to changing it.

Sorting

Where it runs and what it costs, with real numbers.

Filtering

One filter model behind every control, which is the point worth making.

Grouping, totals and pivot

Reducing many rows to the few numbers someone asked for.

Tree data and master-detail

Hierarchies and detail rows, including the awkward cases rather than only the tidy one.

Selection and editing

An unusually broad editor set, and what happens when a write is refused.

Rendering, formatting and theme

How each cell looks, the rules that colour it, and dressing the whole grid to match your product.

Cell rendering

Twenty-four built-in renderers. Visual first, explanatory second.

Conditional formatting

Rules as live state rather than a compile step, editable on the page.

Theming and accessibility

The pages where the theme itself is the subject.

Chrome and menus

The controls around the grid, and the rules behind what each one offers.

Charts, statistics and dashboards

Turning rows into a picture and a number, with several grids and charts moving on one filter.

Charts

Every chart type drawn from the grid's own filtered rows, redrawing as it moves.

See every chart type live, in one gallery →

Statistics

What the grid knows about its own numbers, and about how they have changed since the page loaded.

Sources and live data

Where the rows come from, from a resident array to a server pushing changes by the second.

Sources and live data

Four source modes with genuinely different contracts.

Read the worked example: security log triage over DuckDB and Parquet →

Data Router

One live feed split across many grids, charts and tiles at once, each pick narrowing the others.

One feed, many views

A single live feed split across grids, charts and tiles at once, each following its own slice.

Derived and chained

One grid built from another and following its filter, to any depth, with a single figure in a tile reading the same rows.

AI

A model that explains a figure, answers a question and proposes a change, always with a person in the loop.

Ask, explain and change with a model

A model that reads the figures, answers a question and proposes a change, with the grid checking every step and a person approving it.

Present, share and integrate

The last mile: showing a grid to a room, working with a team, and fitting it into an existing app.

Presenting

Showing a grid to a room rather than to one person at a desk.

Collaboration and governance

What happens when more than one person is looking at the same grid.

Export and integration

The last mile, which decides whether a grid gets adopted inside an existing app.

Building one of these

Each demo is a column list and a row array. The configuration playground lets you change the options and read back the object that produced the result, the developer guide walks through the same configurations with the code beside them, and the API reference lists every option.