Master-Detail (Enterprise)

Master-detail in apex-grid-enterprise renders a nested grid of related rows beneath each expanded master row. Setting the masterDetail config wires up the grid's row expansion automatically (creating, caching, and populating the child grids), so you don't hand-write a detailTemplate.

Basic setup

import 'apex-grid-enterprise/define';

const grid = document.createElement('apex-grid-enterprise');
grid.columns = orderColumns;
grid.data = orders;

grid.masterDetail = {
  columns: [
    { key: 'sku', headerText: 'SKU' },
    { key: 'qty', headerText: 'Qty' },
    { key: 'price', headerText: 'Price' },
  ],
  getDetailData: (order) => order.lineItems,
};

document.body.appendChild(grid);

Each expanded order row now shows a nested grid of its line items.

MasterDetailConfig

Field	Type	Description
columns	ColumnConfiguration[] or (row) => ColumnConfiguration[]	Detail-grid columns; a function lets each master row have its own columns
getDetailData	(row) => C[] | Promise<C[]>	Returns the detail rows for a master row; may be async
detailTag	'apex-grid' | 'apex-grid-enterprise'	Which element to render the detail grid as (default 'apex-grid')
detailHeight	number | string	Height of the detail region
isExpandable	(row) => boolean	Whether a given master row can expand
configureDetail	(grid, context) => void	Hook to configure each detail grid instance after creation

Async detail data

getDetailData can return a promise, so detail rows can be fetched on demand when a master row expands:

grid.masterDetail = {
  columns: lineItemColumns,
  getDetailData: async (order) => {
    const res = await fetch(`/api/orders/${order.id}/items`);
    return res.json();
  },
  detailHeight: 240,
};

Per-row expandability

Use isExpandable to hide the expander on rows with no detail:

grid.masterDetail = {
  columns: lineItemColumns,
  getDetailData: (order) => order.lineItems,
  isExpandable: (order) => order.lineItemCount > 0,
};

Enterprise detail grids

Set detailTag: 'apex-grid-enterprise' to make each detail grid itself an enterprise grid (so detail grids can group, aggregate, etc.). Use configureDetail to set up each instance:

grid.masterDetail = {
  columns: lineItemColumns,
  getDetailData: (order) => order.lineItems,
  detailTag: 'apex-grid-enterprise',
  configureDetail: (detailGrid, context) => {
    detailGrid.aggregations = { price: ['sum'] };
  },
};

The configureDetail context provides the master data (the row) and its rowIndex.

Refreshing a detail

When the underlying detail data changes, invalidate a single master row's cached detail:

grid.refreshDetail(order);

Relationship to manual expansion

masterDetail configures the grid's expansion automatically and overrides any manual expansion/detailTemplate you set. For fully custom expansion content without nested grids, use the community row expansion feature instead.

React example

import { useEffect, useRef } from 'react'
import 'apex-grid-enterprise/define'

export default function MasterDetailGrid() {
  const ref = useRef<any>(null)

  useEffect(() => {
    const grid = ref.current
    grid.columns = orderColumns
    grid.data = orders
    grid.masterDetail = {
      columns: lineItemColumns,
      getDetailData: (order: any) => order.lineItems,
      detailHeight: 220,
    }
  }, [])

  return <apex-grid-enterprise ref={ref} style={{ height: 520 }} />
}