Opening detail rows

Open detail rows from the start for every row or some rows, and open or close all of them from code or the context menu.

Live demoOpen all details

Urgent orders open at the start; open or close all.

Code for this demo

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(200).map((r, i) => ({ ...r, urgent: i % 6 === 0 }));
  const grid = createGrid(ctx.host, {
    columns: [{ field: 'name', header: h('Name', '이름'), width: 180 }, { field: 'urgent', header: h('Urgent', '긴급'), type: 'boolean', width: 90 }, { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 120 }],
    data, locale: ctx.lang, detailHeight: 90,
    detailRenderer: ({ row }) => {
      const el = document.createElement('div');
      el.style.padding = '12px 16px';
      el.textContent = h(`Order lines of ${row.name}: Q2 ${row.q2.toLocaleString()}, Q3 ${row.q3.toLocaleString()}, Q4 ${row.q4.toLocaleString()}`, `${row.name}의 주문 내역: 2분기 ${row.q2.toLocaleString()}, 3분기 ${row.q3.toLocaleString()}, 4분기 ${row.q4.toLocaleString()}`);
      return el;
    },
    detailExpanded: row => row.urgent,
  });
  grid.on('detailToggleAll', e => ctx.log(`all details ${e.expanded ? 'open' : 'closed'}`));
  button(ctx, h('Open all', '모두 펼치기'), () => grid.setAllDetailsExpanded(true));
  button(ctx, h('Close all', '모두 접기'), () => grid.setAllDetailsExpanded(false));
  text(ctx, h('Urgent rows start opened. The cell context menu has the same two entries.', '긴급 행은 처음부터 펼쳐져 있습니다. 셀 우클릭 메뉴에도 같은 두 항목이 있습니다.'));
  return grid;
}

createGrid(el, {
  columns,
  data,
  detailRenderer: ({ row }) => renderOrderLines(row),
  detailExpanded: row => row.priority === 'urgent',     // or true for every row
});
grid.setAllDetailsExpanded(true);    // every detail row open
grid.setAllDetailsExpanded(false);   // every one closed
grid.on('detailToggleAll', e => console.log(e.expanded));

Name	Type	Description
`detailExpanded`	`boolean \| (row) => boolean`	Rows that start opened. Applied when the grid is made, on setData (rows matching it open again) and to added rows.
`setAllDetailsExpanded(open)`	`void`	Open every row that can have a detail (isRowMaster), or close them all.
`detailToggleAll (event)`	`{ expanded }`	After setAllDetailsExpanded; detailToggle still fires for single rows.

The built-in cell context menu has Expand all details and Collapse all details when the grid has a detailRenderer (keys expandDetails / collapseDetails for your own menu).
Opening hundreds of details renders each panel as it scrolls into view, so it stays fast.