Row Expansion (Master-Detail) in Apex Grid

Row expansion adds a chevron column whose toggle reveals an arbitrary detail panel underneath the row. Unlike tree data, the detail panel is not a child row sharing the grid's columns — it is a free-form template (a different layout, a chart, a form, anything renderable).

Enabling row expansion

grid.expansion = {
  enabled: true,
  detailTemplate: ({ data }) => html`
    <order-summary .order=${data}></order-summary>
  `,
  isExpandable: (row) => row.hasDetails,
};

Configuration

type ExpansionConfiguration<T> = {
  enabled: boolean;
  detailTemplate: (ctx: { data: T }) => unknown;
  isExpandable?: (row: T) => boolean;
};

• detailTemplate receives a context object with the row data and returns a Lit template. The template renders inside the expanded panel.
• isExpandable is an optional predicate that gates which rows show a chevron. Rows for which it returns false are not expandable.

Programmatic API

await grid.expandRow(row);
await grid.collapseRow(row);
await grid.toggleRowExpansion(row);
await grid.expandAllRows();
await grid.collapseAllRows();
const isOpen = grid.isRowExpanded(row);

grid.expandedRows = [row1, row2];           // setter routes through `rowExpanding`
const current = grid.expandedRows;          // getter

Events

• rowExpanding — cancellable; fires before a row's panel toggles.
• rowExpanded — fires after the row's expanded state changes.

When to use which

Need	Use
Children share the parent's column layout	Tree data
Detail panel uses a different layout, components, or chart	Row expansion
Both	Tree data + per-row expansion are not mutually exclusive at the configuration level, but typically a grid will pick one of the two patterns for clarity.