playground

Change an option. Watch it land.

A real grid, reconfigured from the panel on the left. Every switch here maps to one key in the configuration object, and the object below the grid is the one that produced what you are looking at. Copy it into your own source and you get the same grid.

Download Lattice Grid Take the configuration you built here and run it locally.

Configuration

Data

Synthetic cloud billing rows, generated in your browser from a fixed seed.

Rows

Appearance

Theme and density are applied live, with no reload.

Theme

Left alone, the grid follows the viewer’s own setting.

Density

One scale that every geometry token derives from.

Layout

Row height

Header height

Columns

The column list is fixed here. These are the per-column settings worth seeing move.

Group rows by Account Service Region Environment

Tick order sets the nesting order.

Pin monthly cost

Environment cell

Selection

Click a row, or shift-click a second, to feel the difference.

Mode

Checkbox column

Select-all in the header

Tri-state, and it selects what the filter shows.

Totals

Monthly cost is the column carrying a sum.

Grand total

Pinned stays put while you scroll; inline sits at the end of the rows.

Total row per group

Needs a grouped column above.

Name the reduction in the heading

Only shows under grouping. Tick a column above.

Pagination

Paginate

Page size

Building…

Loading a live grid…

The configuration behind it

Anything still at its default is left out, so this is the set of decisions you have actually made. rows is your data.

This is a fraction of the surface. The API quick reference lists every option, and the guide walks through the ones worth understanding before you start. Development on localhost needs no licence key, so the fastest way to carry on from here is to point it at your own data.