syidaxgrid
Home Pricing Settings
SYIDAX / DATA GRID

Row details PRO

Expand row details while retaining the table's context.

Get started
Row detailsSample order data
120 rows
Loading Grid…

Options

Changes below update the Grid and code immediately.

A Pro license is required to use Pro features in your product.

Latest result

Row details are enabled in this example. Click an order row's expand button.

View code
Current preview

Usage guide

#

Expand additional information for one order without leaving the list.

Try it yourself

  1. Find the row expand button

    Row details are enabled in this example. Click an order row's expand button.

  2. Inspect the details

    Inspect the area below the selected order. Open other orders too and verify each panel corresponds to its row.

  3. Collapse and reopen

    Click the expand button again to collapse details. Toggle Row details below the table to compare behavior.

Expected results

Details associated with the selected order open and close within the list.

This sample demonstrates basic detail panels. Connect a detail renderer and data fetching to show delivery history or order items.

Useful terms

master / detail
The source list row / its additional information area.
detailCellRenderer
A setting creating the UI displayed in a detail area.

Using this feature in your product requires the Pro runtime and a valid license.

API reference

#

Other properties6
Attribute / PropertyType / DefaultDescription
PRO
masterDetail		booleanDefault: falsemaster-detail (single level, AG `masterDetail` parity): data rows gain an expand chevron in the first column; an expanded master is followed by a full-width detail row. Detail rows never count toward pagination (AG default). Expansion state keys off the canonical row id — provide `getRowId` for stability across filters (index-fallback ids shift, same caveat as selection). The detail panel renderer/slot lands ; until then the shell shows the master row's data.
PRO
detailRowHeight		numberDefault: 160pixel height of an expanded detail row (default 160).
PRO
detailCellRenderer		(params: { row: Record<string, unknown>; rowId: string | number }) => CellRenderOutputDefault: undefineddetail panel renderer (function prop, AG `detailCellRenderer` parity). Returns the SAME discriminated output as cell renderers: `{kind:'text'}` (safe text), `{kind:'html'}` (trusted innerHTML — the host owns sanitisation, same contract as `cellRenderer`), or `{kind:'vnode'}`. Without it — or when it throws or returns an invalid shape (warned once) — the built-in field-list shell renders as the fallback.
PRO
detailGridOptions		DetailGridOptionsDefault: undefineddeclarative (nested) detail grid. When set alongside (and no , which wins), each expanded master's panel auto-mounts a child `<sy-grid>` configured by this object and fed `getDetailRowData(master)`. A config whose `masterDetail` + `detailGridOptions` are set nests grids further — the ergonomic path a plain-JS host cannot take via `detailCellRenderer` (it cannot build a child-grid vnode). Nesting is capped at levels (self-referential-config guard).
PRO
getDetailRowData		(params: { row: Record<string, unknown>; rowId: string | number }) => unknown[] | Promise<unknown[]>Default: undefinedfetch the child rows for an expanded master (used with ). Returns the rows synchronously OR a `Promise` . Called ONCE per open (the result is cached per master id and released on collapse), so an async fetch fires exactly once.
PRO
detailNestingLevel		numberDefault: 0this grid's depth in a master-detail nesting chain (0 = the top grid). The parent sets it on each auto-mounted child; the renderer stops recursing at .
Events3
EventsDetail typeDescription
PRO
{ rowId: string | number; expanded: boolean }fires when a master row's detail expands or collapses.
PRO
{ rowId: string | number; master: GridRow | null }a master's detail was OPENED: its panel (and, with , the child grid) mounts on the next render. `master` is the master row when it is on the current filtered set, else `null`. Pairs with so a host can create / dispose per-detail resources (subscriptions, a child-grid ref, etc.).
PRO
{ rowId: string | number }a master's detail was CLOSED: its panel / child grid unmounts.
Methods3
Method / ArgumentsReturn typeDescription
PRO
rowId: string | number, expanded: boolean		Promise<void>expand/collapse one master row's detail panel. Unknown ids warn + no-op (same validation discipline as row groups/tree nodes).
PRO
Promise<void>expand every master's detail across the WHOLE filtered set (all pages — AG's forEachNodeAfterFilter convention; one `detailRowToggled` per change).
PRO
Promise<void>collapse every open detail row.
GridTab Navigate Enter Open