트리 데이터

import { createGrid, type Row } from '@freegridjs/core';
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 });
  // an org chart: departments contain teams, teams contain people
  const org: Row[] = [
    { id: 'hq', parent: null, name: h('Head office', '본사'), role: '', budget: 1200 },
    { id: 'dev', parent: 'hq', name: h('Development', '개발본부'), role: '', budget: 640 },
    { id: 'web', parent: 'dev', name: h('Web team', '웹팀'), role: '', budget: 260 },
    { id: 'p1', parent: 'web', name: '김민준', role: h('Lead', '팀장'), budget: 0 },
    { id: 'p2', parent: 'web', name: '이서연', role: h('Engineer', '개발자'), budget: 0 },
    { id: 'app', parent: 'dev', name: h('App team', '앱팀'), role: '', budget: 380 },
    { id: 'p3', parent: 'app', name: '박지호', role: h('Engineer', '개발자'), budget: 0 },
    { id: 'biz', parent: 'hq', name: h('Business', '사업본부'), role: '', budget: 560 },
    { id: 'p4', parent: 'biz', name: '최유나', role: h('Manager', '매니저'), budget: 0 },
    { id: 'p5', parent: 'biz', name: '정하준', role: h('Sales', '영업'), budget: 0 },
    // its children come from the "server" on first expand
    { id: 'lab', parent: 'hq', name: h('Research lab (loads on expand)', '연구소 (펼칠 때 불러옴)'), role: '', budget: 300, lazy: true },
  ];
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Organization', '조직'), width: 280 },
      { field: 'role', header: h('Role', '직책'), width: 140 },
      { field: 'budget', header: h('Budget (M)', '예산(백만)'), type: 'number', format: '#,##0', width: 140 },
    ],
    data: org,
    locale: lang,
    getRowId: r => r.id,
    rowSelection: 'multiple',
    groupSelectsChildren: true,
    groupDefaultExpanded: 1,
    treeData: {
      getParentId: r => r.parent,
      hasChildren: r => !!r.lazy,
      // pretend server: answers after 600 ms
      loadChildren: row => new Promise<Row[]>(resolve => setTimeout(() => resolve([
        { id: 'r1', parent: row.id, name: '한지민', role: h('Researcher', '연구원'), budget: 0 },
        { id: 'r2', parent: row.id, name: '오세훈', role: h('Researcher', '연구원'), budget: 0 },
      ]), 600)),
    },
  });
  grid.on('groupToggle', e => ctx.log(`groupToggle → ${e.key}: ${e.expanded}`));
  grid.on('childrenLoaded', e => ctx.log(`childrenLoaded → ${e.rows.length}`));

  text(ctx, h('Open the arrows and check a department: its people are checked too. Search keeps the parents of every match.',
    '화살표로 펼치고 부서를 체크해 보세요. 소속 직원도 함께 체크됩니다. 검색하면 찾은 행의 상위 조직이 함께 남습니다.'));
  separator(ctx);
  button(ctx, h('Expand all', '모두 펼치기'), () => grid.expandAll());
  button(ctx, h('Collapse all', '모두 접기'), () => grid.collapseAll());
  button(ctx, h('Search "team"', '"팀" 검색'), () => grid.setQuickFilter(h('team', '팀')));
  button(ctx, h('Clear search', '검색 지우기'), () => grid.setQuickFilter(''));
  return grid;
}