nestedGrid

Makes a grid inside each detail panel, from settings built for its master row.

Import	import { nestedGrid } from '@dzgrid/dom/detail';
Signature	nestedGrid<C>(o: NestedGridOptions<C>): SlotPart<"detail">
Texts	import { EN_DETAIL } from '@dzgrid/dom/locales/en-detail'; languages: en, fr, ar
Own CSS	DETAIL_CSS — to add yourself with injectStyles: false
Declared in	packages/dom/src/detail/nested.ts

Options	Type
settings (required)	(c: NestedContext) => GridSettings<C>
keep	number
onGrid	(grid: GridInstance<C, any>, c: NestedContext) => void
env	(c: NestedContext) => GridEnv

What it does

nestedGrid({ settings }) is a part for detail(). For each panel shown it calls settings(c) with the panel’s context (c.row is the master row) and makes a grid from the answer: its rows, columns, messages, label, its own features. That grid has its own keys, scroll, sort, filters and focus. Enter or F2 on the panel goes into it (its focused cell, else the first row in view); Escape on one of its cells comes back to the panel, one level only.

When a panel goes (closed or scrolled away), its grid’s sort, filters, quick search, open rows, focused cell and scroll are remembered, and given back when it comes again, for the last keep masters. A new master row or a new language updates the grid in place; only a changed fixed setting (such as getRowId or features) makes it again.

A nested grid has no height of its own: give detail() a number or a function as height. Grids can nest inside nested grids; past three levels, the grid made tells unsupported-combination and still works.

Options

• settings (required): the grid for a master, from the panel’s context: its rows, columns, messages, label, its own features.
• keep: how many masters’ grids are remembered, the least recently used forgotten first: 20 by default.
• onGrid: called with each grid made, once it is mounted, to wire your own toolbar or events.
• env: the grid’s test seams, for tests only.

Example

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { detail, nestedGrid } from '@dzgrid/dom/detail';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_DETAIL } from '@dzgrid/dom/locales/en-detail';

type Visit = { id: string; day: string; frogs: number };
type Pond = { id: string; name: string; visits: Visit[] };

const messages: GridMessages = { ...EN, text: { ...EN.text, ...EN_DETAIL.text } };
const visits = nestedGrid<Visit>({
  settings: (c) => ({
    rows: (c.row as Pond).visits,
    columns: [{ id: 'day', header: 'Day', type: 'day' }, { id: 'frogs', header: 'Frogs', type: 'number' }],
    getRowId: (v) => v.id,
    label: `Visits of ${(c.row as Pond).name}`,
    messages,
  }),
  keep: 50,
  onGrid: (grid) => console.log(grid.kernel.query.sort),
});

createGrid<Pond>(document.getElementById('ponds')!, {
  rows: [{ id: 'n1', name: 'Lily pond', visits: [{ id: 'v1', day: '2026-05-04', frogs: 12 }] }],
  columns: [{ id: 'name', header: 'Pond' }],
  getRowId: (p) => p.id,
  messages,
  features: [detail<Pond>({ part: visits, height: 180 })],
});

Live demo

Open a pond, sort its visits, close it and open it again: the sort is kept.

See also

• detail(): the panels it fills.
• Master and detail in the guide.