JSVision

Appearance

@jsvision/datagrid / masterDetail

Function: masterDetail() ​

masterDetail<M, D>(master, buildDetail): object

Defined in: datagrid/src/master-detail.ts:47

Link a detail grid to master's focused record.

Type Parameters ​

M ​

M

D ​

D

Parameters ​

master ​

EditableDataGrid<M>

The master grid whose focused record drives the detail.

buildDetail ​

(focused) => EditableDataGrid<D>

Receives a reactive focused accessor (over master.focusedRow()) and returns the detail grid — typically backed by fromReactiveRows(() => …focused()…).

Returns ​

object

The detail grid and a dispose() that tears down its reactive scope (idempotent; also fired automatically when the surrounding scope disposes).

detail ​

detail: EditableDataGrid<D>

dispose ​

dispose: () => void

Returns ​

void

Example ​

ts
import { column, fromRows, fromReactiveRows, EditableDataGrid, masterDetail } from '@jsvision/datagrid';
import { signal } from '@jsvision/ui';
interface Order { id: number }
interface Line { id: number; orderId: number }
const orders = signal<Order[]>([{ id: 7 }]);
const columns = [column({ id: 'id', title: 'Order', value: (r: Order) => r.id })];
const source = fromRows(orders, { rowKey: (r) => r.id });
const lines = signal<Line[]>([]);
const lineColumns = [column({ id: 'id', title: 'Line', value: (r: Line) => r.id })];
const master = new EditableDataGrid<Order>({ columns, source });
const { detail, dispose } = masterDetail(master, (focused) =>
  new EditableDataGrid<Line>({
    columns: lineColumns,
    source: fromReactiveRows(() => lines().filter((l) => l.orderId === focused()?.id), {
      rowKey: (l) => l.id,
    }),
  }),
);
// ...later:
dispose(); // tear down the detail's reactive link