상세 행 펼치기

상세 행을 처음부터 모든 행이나 일부 행에 펼쳐 두고, 코드나 우클릭 메뉴로 모두 펼치거나 접습니다.

실행 예제상세 모두 펼치기

긴급 주문은 처음부터 펼침, 모두 펼치기·접기.

이 데모의 코드

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));

이름	타입	설명
`detailExpanded`	`boolean \| (row) => boolean`	처음부터 펼칠 행. 그리드를 만들 때, setData(조건에 맞는 행은 다시 펼침), 추가된 행에 적용됩니다.
`setAllDetailsExpanded(open)`	`void`	상세를 가질 수 있는 모든 행(isRowMaster)을 펼치거나 모두 접습니다.
`detailToggleAll (event)`	`{ expanded }`	setAllDetailsExpanded 뒤 발생. 한 행씩은 여전히 detailToggle.

detailRenderer가 있으면 기본 셀 우클릭 메뉴에 상세 모두 펼치기·상세 모두 접기가 있습니다(직접 만든 메뉴에서는 키 expandDetails·collapseDetails).
수백 개를 펼쳐도 보이는 패널만 그리므로 빠릅니다.