DataTable

// 데이터 소스 정의
const sources: DataSource[] = [
  {
    id: "investment",
    label: "투자",
    color: "primary",
    columns: [
      { key: "value", label: "현재 가치", sortable: true },
      { key: "irr",   label: "IRR",       sortable: true },
    ],
    data: investmentData,
  },
  // ...다른 소스
];

// Hook 생성
const joined = useJoinedDataTable({
  masterKey: "companyName",
  masterColumn: { key: "companyName", label: "기업명", primary: true },
  sources,
});

// 툴바 — 필드 드롭다운에서 소스별 열 관리
<TableToolbar {...joined.toolbarProps} />

// 테이블 렌더링 (masterKey 컬럼은 자동 고정)
<DataTable {...joined.tableProps}>
  {joined.rows.map(row => (
    <TableRow key={String(row.companyName)}>
      {joined.visibleKeys.map(key => (
        <TableCell key={key} primary={key === "companyName"}>
          {String(row[key] ?? "")}
        </TableCell>
      ))}
    </TableRow>
  ))}
</DataTable>

// groupBy로 행 그룹화 (그룹화 시 페이지네이션 자동 비활성화)
const joined = useJoinedDataTable({
  masterKey: "companyName",
  masterColumn: masterCol,
  sources,
  groupBy: {
    key: "building",
    label: "건물",
    resolve: { "(주)테크스타트": "A동", "(주)헬스랩": "B동", ... },
  },
});

// groups가 있으면 그룹 렌더링, 없으면 flat 렌더링
<DataTable {...joined.tableProps}>
  {joined.groups?.map(group => (
    <Fragment key={group.key}>
      <GroupHeaderRow
        label={`${joined.groupByLabel}: ${group.key}`}
        count={group.count}
        collapsed={group.collapsed}
        onToggle={() => joined.toggleGroup(group.key)}
      />
      {!group.collapsed && group.rows.map(row => (
        <TableRow key={...}>
          {/* cells */}
        </TableRow>
      ))}
    </Fragment>
  ))}
</DataTable>