마스터/디테일

detailRenderer로 행 아래에 다른 그리드 같은 내용을 담은 패널을 열고, isRowMaster로 패널을 열 수 있는 행을 정합니다.

실행 예제마스터/디테일

행 아래에 무엇이든 넣을 수 있는 패널. 여기서는 다른 그리드를 넣었습니다.

이 데모의 코드

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const data = makeRows(200);
  const first = data.find(r => r.active)!;
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 190 },
      { field: 'company', header: h('Company', '회사'), width: 140 },
      { field: 'country', header: h('Country', '국가'), width: 140 },
      { field: 'total', header: h('Total', '합계'), type: 'number', format: '#,##0', width: 130 },
      { field: 'active', header: h('Active', '활성'), type: 'boolean', width: 90 },
    ],
    data,
    locale: lang,
    detailHeight: 180,
    // only active customers have a detail panel
    isRowMaster: row => row.active,
    detailRenderer: ({ row }) => {
      // a small grid inside the panel: the person's quarters
      const el = document.createElement('div');
      el.style.height = '158px';
      createGrid(el, {
        columns: [
          { field: 'quarter', header: h('Quarter', '분기'), width: 120 },
          { field: 'revenue', header: h('Revenue', '매출'), type: 'number', format: '#,##0', width: 160 },
        ],
        data: ['q1', 'q2', 'q3', 'q4'].map((q, i) => ({ quarter: `${i + 1}Q`, revenue: row[q] })),
        locale: lang,
        rowHeight: 26,
      });
      return el;
    },
  });
  grid.on('detailToggle', e => ctx.log(`detailToggle → ${e.row.name}: ${e.expanded}`));

  text(ctx, h('Press the arrow in front of a name: a panel with another grid opens under the row. Inactive people have no panel.',
    '이름 앞 화살표를 누르면 행 아래에 다른 그리드가 든 패널이 열립니다. 비활성 사용자는 패널이 없습니다.'));
  separator(ctx);
  button(ctx, h('Open the first panel', '첫 패널 열기'), () => grid.setDetailExpanded(first, true));
  button(ctx, h('Close it', '첫 패널 닫기'), () => grid.setDetailExpanded(first, false));
  button(ctx, h('Open all', '모두 펼치기'), () => grid.setAllDetailsExpanded(true));
  button(ctx, h('Close all', '모두 접기'), () => grid.setAllDetailsExpanded(false));
  return grid;
}

마스터/디테일은 행 아래에 펼쳐지는 패널을 붙입니다. 첫 컬럼에 화살표가 생기고, 누르면 그리드 폭 전체를 쓰는 패널이 열려 detailRenderer가 돌려준 내용을 보여 줍니다. 주문의 품목을 담은 다른 그리드, 입력 폼, 차트, 단순한 HTML 무엇이든 됩니다. 패널은 행과 함께 스크롤되고 높이(detailHeight, 기본 240px)를 유지합니다.

isRowMaster로 패널을 열 수 있는 행을 정할 수 있습니다. 예를 들어 품목이 있는 주문만 열리게 합니다. 코드에서는 setDetailExpanded로 열고 닫고, detailToggle 이벤트를 받아 패널이 열릴 때 데이터를 불러오면 됩니다. 패널 안의 그리드는 자기 옵션과 이벤트를 가진 평범한 그리드입니다.

createGrid(el, {
  columns,
  data: orders,
  detailHeight: 200,                              // px, default 240
  isRowMaster: row => row.items?.length > 0,      // only these rows get the toggle
  detailRenderer: ({ row }) => {
    // anything: HTML text, an element, or another grid
    const box = document.createElement('div');
    box.style.height = '180px';
    createGrid(box, { columns: itemColumns, data: row.items });
    return box;
  },
});

grid.setDetailExpanded(orders[0], true);
grid.isDetailExpanded(orders[0]);                 // true
grid.on('detailToggle', e => console.log(e.row.id, e.expanded));

detailRenderer가 문자열을 돌려주면 HTML로 삽입됩니다. 사용자 입력 데이터는 이스케이프하거나 요소(element)를 돌려주세요.

처음부터 펼치기, 모두 펼치기·접기

detailExpanded로 처음부터 펼치고, setAllDetailsExpanded()로 모두 펼치거나 접습니다. 자세한 내용:

상세 행 펼치기

옵션, 메서드, 이벤트

이름	타입	설명
`detailRenderer({ row, rowIndex })`	`HTMLElement \| string`	행 아래 패널의 내용. 요소(다른 그리드, 입력 폼, 차트)나 HTML 문자열. HTML 문자열에 넣는 데이터는 이스케이프하세요.
`detailExpanded / setAllDetailsExpanded(open)`	`boolean \| (row) => boolean / void`	처음부터 펼칠 행. 모든 상세 행을 펼치거나 접습니다(detailToggleAll 이벤트).
`detailHeight`	`number`	패널 높이(px, 기본 240).
`isRowMaster(row)`	`boolean`	패널을 열 수 있는 행(기본: 모든 행).
`setDetailExpanded(row, open) / isDetailExpanded(row)`	`void / boolean`	코드로 패널을 열고 닫거나 상태를 확인합니다.
`detailToggle`	`{ row, expanded } (event)`	패널이 열리거나 닫혔습니다.

이 페이지에 대한 질문

행을 펼쳐 다른 그리드를 보여 줄 수 있나요?

네. detailRenderer가 행 아래 패널에 넣을 요소를 돌려주면 되고, 그 안에 다른 그리드를 넣을 수 있습니다. isRowMaster로 펼칠 수 있는 행을 정합니다.