MasterDetailPlugin

Master-Detail Plugin for tbw-grid

Creates expandable detail rows that reveal additional content beneath each master row. Perfect for order/line-item UIs, employee/department views, or any scenario where you need to show related data without navigating away.

Installation

import { MasterDetailPlugin } from '@toolbox-web/grid/plugins/master-detail';

Configuration Options

Option	Type	Default	Description
detailRenderer	(row) => HTMLElement | string	required	Render function for detail content
expandOnRowClick	boolean	false	Expand when clicking the row
detailHeight	number | 'auto'	'auto'	Fixed height or auto-size
collapseOnClickOutside	boolean	false	Collapse when clicking outside
showExpandColumn	boolean	true	Show expand/collapse column
animation	false | 'slide' | 'fade'	'slide'	Animation style

Programmatic API

Method	Signature	Description
expandRow	(rowIndex) => void	Expand a specific row
collapseRow	(rowIndex) => void	Collapse a specific row
toggleRow	(rowIndex) => void	Toggle row expansion
expandAll	() => void	Expand all rows
collapseAll	() => void	Collapse all rows
isRowExpanded	(rowIndex) => boolean	Check if row is expanded

CSS Custom Properties

Property	Default	Description
--tbw-master-detail-bg	var(--tbw-color-row-alt)	Detail row background
--tbw-master-detail-border	var(--tbw-color-border)	Detail row border
--tbw-detail-padding	1em	Detail content padding
--tbw-animation-duration	200ms	Expand/collapse animation

Examples

Basic Master-Detail with HTML Template

import '@toolbox-web/grid';
import { MasterDetailPlugin } from '@toolbox-web/grid/plugins/master-detail';

grid.gridConfig = {
  columns: [
    { field: 'orderId', header: 'Order ID' },
    { field: 'customer', header: 'Customer' },
    { field: 'total', header: 'Total', type: 'currency' },
  ],
  plugins: [
    new MasterDetailPlugin({
      detailRenderer: (row) => `
        <div class="order-details">
          <h4>Order Items</h4>
          <ul>${row.items.map(i => `<li>${i.name} - $${i.price}</li>`).join('')}</ul>
        </div>
      `,
    }),
  ],
};

Nested Grid in Detail

new MasterDetailPlugin({
  detailRenderer: (row) => {
    const childGrid = document.createElement('tbw-grid');
    childGrid.style.height = '200px';
    childGrid.gridConfig = { columns: [...] };
    childGrid.rows = row.items || [];
    return childGrid;
  },
})

See Also

• MasterDetailConfig for all configuration options
• DetailExpandDetail for expand/collapse event details

Extends BaseGridPlugin

Inherited methods like attach(), detach(), afterRender(), etc. are documented in the base class.

Methods

getExtraHeight()

⚠️ Deprecated: Use getRowHeight() instead. This hook will be removed in v2.0.

override — Return total extra height from all expanded detail rows. Used by grid virtualization to adjust scrollbar height.

getExtraHeight(): number

---

getExtraHeightBefore()

⚠️ Deprecated: Use getRowHeight() instead. This hook will be removed in v2.0.

override — Return extra height that appears before a given row index. This is the sum of heights of all expanded details whose parent row is before the given index.

getExtraHeightBefore(beforeRowIndex: number): number

Parameters

Name	Type	Description
beforeRowIndex	number

---

getRowHeight()

override — Get the height of a specific row, including any expanded detail content. Always returns a height to ensure the position cache uses plugin-controlled values rather than stale DOM measurements.

getRowHeight(row: unknown, _index: number): number | undefined

Parameters

Name	Type	Description
row	unknown	The row data
_index	number	The row index (unused, but part of the interface)

Returns

number | undefined - The row height in pixels (base height for collapsed, base + detail for expanded)

---

adjustVirtualStart()

override — Adjust the virtualization start index to keep expanded row visible while its detail is visible. This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.

adjustVirtualStart(start: number, scrollTop: number, rowHeight: number): number

Parameters

Name	Type	Description
start	number
scrollTop	number
rowHeight	number

---

expand()

Expand the detail row at the given index.

expand(rowIndex: number): void

Parameters

Name	Type	Description
rowIndex	number	Index of the row to expand

---

collapse()

Collapse the detail row at the given index.

collapse(rowIndex: number): void

Parameters

Name	Type	Description
rowIndex	number	Index of the row to collapse

---

toggle()

Toggle the detail row at the given index.

toggle(rowIndex: number): void

Parameters

Name	Type	Description
rowIndex	number	Index of the row to toggle

---

isExpanded()

Check if the detail row at the given index is expanded.

isExpanded(rowIndex: number): boolean

Parameters

Name	Type	Description
rowIndex	number	Index of the row to check

Returns

boolean - Whether the detail row is expanded

---

expandAll()

Expand all detail rows.

expandAll(): void

---

collapseAll()

Collapse all detail rows.

collapseAll(): void

---

getExpandedRows()

Get the indices of all expanded rows.

getExpandedRows(): number[]

Returns

number[] - Array of row indices that are expanded

---

getDetailElement()

Get the detail element for a specific row.

getDetailElement(rowIndex: number): HTMLElement | undefined

Parameters

Name	Type	Description
rowIndex	number	Index of the row

Returns

HTMLElement | undefined - The detail HTMLElement or undefined

---

refreshDetailRenderer()

Re-parse light DOM to refresh the detail renderer. Call this after framework templates are registered (e.g., Angular ngAfterContentInit).

This allows frameworks to register templates asynchronously and then update the plugin’s detailRenderer.

refreshDetailRenderer(): void

---