gridcn1.2.2
RecipesUI patterns

Multiple grids on one page

Mount more than one grid on a page with no extra setup.

Each <DataGridProvider> mounts its own Zustand store instance (createStore in a useState factory). There is no module-level singleton, so multiple grids on one page work with no configuration:

<div className="grid grid-cols-2 gap-4">
  <DataGridProvider {...gridA} columns={columnsA}>
    <DataGridRoot><DataGridHeader /><DataGridBody /></DataGridRoot>
  </DataGridProvider>
  <DataGridProvider {...gridB} columns={columnsB}>
    <DataGridRoot><DataGridHeader /><DataGridBody /></DataGridRoot>
  </DataGridProvider>
</div>

data-grid-url-state needs a distinct prefix per grid

Without a distinct prefix, two grids syncing to the URL collide on the same sort, filter, join, and q keys. See URL state.

Remember the user's view

Save sort, filters, search, and column layout, and restore them on the next visit.

Edit a row with a form

Commit several fields of one row from a form as one validated, undoable change.

On this page

Related