Master / detail

Master / detail is the inline UI for drill-through: click a leaf row and its source rows appear in a small table nested under it, without leaving the grid. It’s the same engine drill — the panel just renders the rows behind that node — and the detail cells can optionally be made editable so a fix flows straight back through source-row editing.

Dash (Python)

from dash_tensor_grid import TensorGrid

# The component opens a detail panel per row; `detail_field` names the row field holding the
# records array. For lazy loading, answer `detail_request` from a callback with `detail_data`.
TensorGrid(
    id="grid",
    row_data=...,
    column_defs=...,
    enable_master_detail=True,
    detail_field="source_rows",     # an array of records -> a small table
    detail_editable=True,           # click-to-edit the source cells in the panel
)

React

import { TensorGrid } from '@tensorgrid/react';

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  masterDetail
  detailLimit={20}
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', qty: 'sum' }"
  master-detail
  :detail-limit="20"
/>

Vanilla JS

import { mountTensorGrid } from '@tensorgrid/vanilla';

mountTensorGrid(document.getElementById('grid'), {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
  masterDetail: true,
  detailLimit: 20,
});

Notes

• Leaf rows only. Clicking a group row expands its children (roll-up); the master-detail panel opens on a leaf, where “children” means the underlying source records.
• detailLimit caps how many source rows the panel shows per leaf (default 20) — the drill can match far more; this keeps the inline table tidy.
• Editable detail. Pair masterDetail with editable (adapters) or detail_editable (Dash) and a committed edit re-runs the engine so every aggregate above it updates — see source-row editing.