Lattice Grid 1.80: design-system presets and a page that pages

A grid that has to look like the product around it should not cost a design review to get there, and a pager that says Next should mean it. This release gives a grid four ready-made looks, a way to read a host application’s own theme, a drop-in for a page already built on the MUI X Data Grid, and a pagination bar that finally does what it says over a real server.

Four design systems, one stylesheet each

Material 3, Bootstrap 5, Ant Design 5 and Fluent 2 are now a second stylesheet, loaded after the grid’s own. Nothing in a preset is more specific than the grid’s built-in rules, so load order alone decides which one wins, and there is no class to add and no build step: the accent colour, the surfaces, the corner radius, the type and the elevation all restyle at once, in light and dark. The Bootstrap 5 preset goes one step further and reads a page’s own Bootstrap variables live, so a page already running Bootstrap inherits its exact palette instead of a copy that can drift out of step with it.

themeFromMui: a live read of a host’s own theme

themeFromMui takes a real MUI createTheme() object, or any plain object shaped like one, and hands back the matching grid tokens: the palette, the type scale, the corner radius, ready either as one block of CSS or as a function that sets them on an element directly. A grid dropped into a Material UI application picks up that application’s own colours instead of a separate palette living beside it.

<LatticeDataGrid>: a drop-in for the MUI X Data Grid

A React page already written against @mui/x-data-grid does not need rewriting prop by prop to move onto Lattice. <LatticeDataGrid> takes the MUI X free-tier props under MUI’s own names, rows, columns, sorting, filtering, selection and pagination among them, and maps every one onto the grid’s own configuration, an API call or an event. What it cannot honestly match, a Pro or Premium prop, sx, initialState, is refused once by name rather than silently dropped, so a migrating page finds out immediately what still needs a second look.

A pager that pages the source

Clicking Next, Previous, typing a page number or changing the page size over a paged or remote source now moves the grid. A page change fetches exactly the rows that page needs, the row range shown is the current page while the total and the match count still read the whole result, and a source that cannot return a window at all says so by name and keeps scrolling with no pager rather than one that moves nothing.

A written contract for every theme token, and for a custom adapter

Every one of the grid’s 171 public theme tokens is now written down: what each affects, whether a preset must set it, may tune it, or should leave it alone. Anyone building a ninth pushdown adapter beyond the eight that ship gets the equivalent page: the capabilities you declare, the request and answer shapes, how a refusal is named, and the write-back contract, stated precisely rather than inferred from an example.

See it running

The theming guide switches one live grid between all four presets so you can watch the restyle happen, and covers themeFromMui and the full token contract. Reading ClickHouse live is still the best place to see a pushdown source at scale. The full list of what changed, including the adapter contract and the theme token reference, is in the changelog.