syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

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.

Markdown source Features

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.

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.

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.

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.

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.

Related reading