MasterDetailConfig

Configuration options for the master-detail plugin.

Example

const grid = document.querySelector('tbw-grid');
grid.plugins = [
  new MasterDetailPlugin({
    detailRenderer: (row) => {
      const el = document.createElement('div');
      el.textContent = `Details for ${row.name}`;
      return el;
    },
    detailHeight: 'auto',
    expandOnRowClick: true,
    animation: 'slide',
  }),
];

Properties

Property	Type	Description
detailRenderer?	(row: Record<string, unknown>, rowIndex: number) => string | HTMLElement	Renderer function that returns detail content for a row
detailHeight?	number | auto	Height of the detail row - number (pixels) or ‘auto’ (default: ‘auto’)
expandOnRowClick?	boolean	Expand/collapse detail on row click (default: false)
collapseOnClickOutside?	boolean	Collapse expanded detail when clicking outside (default: false)
showExpandColumn?	boolean	Show expand/collapse column (default: true)
animation?	ExpandCollapseAnimation	Animation style for expanding/collapsing detail rows. - false: No animation - 'slide': Slide down/up animation (default) - 'fade': Fade in/out animation

Property Details

animation

Default: 'slide'

---