# Row details

Master/detail expands an order to show its line items or shipping history. The parent row is a summary, and a full-width panel beneath it holds details.

Canonical: https://grid.syidax.com/docs/features/master-detail/

<a id="understand"></a>

## How it works and when to use it

Use detailCellRenderer for a simple explanation, or detailGridOptions and getDetailRowData for a nested table. Provide stable IDs through getRowId to retain expansion state.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Text detail panel

Render simple notes as safe text when no line-item table is needed.

```javascript
grid.masterDetail = true;
grid.detailRowHeight = 120;
grid.detailCellRenderer = ({ row }) => ({
  kind: 'text', text: String(row.memo ?? 'No notes available.'),
});
```

Verify the result: Expand an order to display its notes. The panel does not count as another source order or a row on the page.

<a id="example-2"></a>

## Example 2. Display order items in a nested table

Use this when each source row has an items array. Remove the custom renderer before configuring the nested table.

```javascript
grid.detailCellRenderer = undefined;
grid.detailGridOptions = {
  columnDefs: [
    { field: 'product', headerName: 'Item' },
    { field: 'quantity', headerName: 'Quantity' },
  ], height: '180px',
};
grid.getDetailRowData = ({ row }) => row.items ?? [];
grid.detailRowHeight = 200;
```

Verify the result: Only the items belonging to each parent order are passed to its nested Grid. Parent settings are not all copied to the child automatically.

<a id="example-3"></a>

## Example 3. Fetch details on expansion

Return a Promise from getDetailRowData to show a loading state while fetching the nested table. Connect your server's detail endpoint and design failure messages and retries in your app.

Verify the result: Results are reused while a row remains expanded; collapsing it clears the cache. Expanding all rows can trigger many requests, so consider your data volume.

<a id="pitfalls"></a>

## Combining features and troubleshooting

detailCellRenderer takes precedence over a declarative nested Grid. Enabling both does not create a nested table alongside the renderer.

Nested details have a depth limit. Avoid recursive, self-referencing options and configure only the levels your workflow needs.

<a id="related-api"></a>

## APIs used by this feature

- [masterDetail](https://grid.syidax.com/docs/options/masterDetail.md) — Expands source rows into full-width detail panels, such as items beneath orders.
- [detailRowHeight](https://grid.syidax.com/docs/options/detailRowHeight.md) — Height of expanded detail panels in pixels.
- [detailCellRenderer](https://grid.syidax.com/docs/options/detailCellRenderer.md) — Builds detail content using the text, html, or vnode contract. Takes precedence over declarative nested Grids.
- [detailGridOptions](https://grid.syidax.com/docs/options/detailGridOptions.md) — Columns and options for an automatically generated nested Grid in the detail panel. Use with getDetailRowData.
- [getDetailRowData](https://grid.syidax.com/docs/options/getDetailRowData.md) — Returns detail rows for the expanded parent as an array or Promise. Reuses the result while the row remains expanded.
- [detailNestingLevel](https://grid.syidax.com/docs/options/detailNestingLevel.md) — Depth of nested detail Grids. Set by the parent for generated children and used to enforce recursion limits.
- [setDetailRowExpanded](https://grid.syidax.com/docs/methods/setDetailRowExpanded.md) — Expands or collapses a detail panel by stable parent row ID.
- [expandAllDetailRows](https://grid.syidax.com/docs/methods/expandAllDetailRows.md) — Expands detail rows across all pages passing the current filter. Consider request volume with lazy loading.
- [collapseAllDetailRows](https://grid.syidax.com/docs/methods/collapseAllDetailRows.md) — Collapses all open detail rows and cleans up their panel resources.
- [detailRowToggled](https://grid.syidax.com/docs/events/detailRowToggled.md) — Emitted when a parent row's detail expansion changes.
- [detailRowCreated](https://grid.syidax.com/docs/events/detailRowCreated.md) — Emitted when a detail panel is created. Connect app resources using its row ID and parent data.
- [detailRowDestroyed](https://grid.syidax.com/docs/events/detailRowDestroyed.md) — Emitted when a detail panel is destroyed. Clean up app resources associated with its rowId too.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/master-detail) — The guide describes which interactions are available to try.