Row Expansion

const data = [
{ id: '1', name: '김민준', followers: 128000 },
{ id: '2', name: '이서연', followers: 84500 },
{ id: '3', name: '박도윤', followers: 233000 },
{ id: '4', name: '최하은', followers: 45200 },
{ id: '5', name: '정시우', followers: 67800 },
];

// row model은 자동 주입되지 않으므로 expanded 모델을 명시 추가.
const expandedRowModel = getExpandedRowModel();

// 확장 토글 컬럼 — columnRole: 'control'로 표시해 셀 선택·병합 범위에서 chrome으로 취급.
function makeExpandColumn() {
return {
  id: '_expand',
  size: 44,
  enableSorting: false,
  meta: { columnRole: 'control' },
  header: ({ header }) => (
    <DataGrid.HeaderCell header={header} aria-label="Expand column">
      {null}
    </DataGrid.HeaderCell>
  ),
  cell: (info) => {
    const row = info.row;
    const expanded = row.getIsExpanded();
    return (
      <DataGrid.Cell cell={info.cell}>
        <IconButton
          size="sm"
          variant="tertiary"
          onClick={row.getToggleExpandedHandler()}
          aria-expanded={expanded}
          aria-label={expanded ? 'Collapse row' : 'Expand row'}
        >
          <IconChevronRightOutline
            size={16}
            style={{
              transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
              transition: 'transform 0.15s ease',
            }}
          />
        </IconButton>
      </DataGrid.Cell>
    );
  },
};
}

// detail 패널 — 행이 아니라 일반 컨테이너라 [data-row] 개수에 영향을 주지 않습니다.
function DetailPanel({ row }) {
return (
  <Box
    $css={{
      padding: '$spacing-400',
      backgroundColor: '$background-2',
      borderBottomWidth: '1px',
      borderBottomStyle: 'solid',
      borderBottomColor: '$border-default',
    }}
  >
    {/* 임의 콘텐츠 — 소비자가 row.original로 원본 데이터를 자유롭게 렌더합니다 */}
    <Typo variant="$body-2">{row.original.name} · 상세 정보</Typo>
  </Box>
);
}

const columns = [
makeExpandColumn(),
{
  accessorKey: 'name',
  header: ({ header }) => <DataGrid.HeaderCell header={header}>채널</DataGrid.HeaderCell>,
  cell: (info) => <DataGrid.Cell cell={info.cell}>{String(info.getValue() ?? '')}</DataGrid.Cell>,
},
{
  accessorKey: 'followers',
  header: ({ header }) => <DataGrid.HeaderCell header={header}>팔로워</DataGrid.HeaderCell>,
  cell: (info) => <DataGrid.Cell cell={info.cell}>{Number(info.getValue() ?? 0).toLocaleString()}</DataGrid.Cell>,
},
];

function ExpansionGrid() {
const [expanded, setExpanded] = useState({});

const table = useDataGrid({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: expandedRowModel, // 확장 모델 명시 주입
  getRowId: (r) => r.id,
  getRowCanExpand: () => true,           // 모든 행 확장 가능
  state: { expanded },
  onExpandedChange: setExpanded,
});

return (
  <DataGrid.Root table={table} size="md">
    <DataGrid.Header />
    {/* render-prop Body — Fragment로 행과 detail 패널을 함께 묶습니다 */}
    <DataGrid.Body>
      {(row, rowIndex) => (
        <React.Fragment key={row.id}>
          <DataGrid.Row row={row} rowIndex={rowIndex}>
            {row.getVisibleCells().map((cell) => (
              <React.Fragment key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </React.Fragment>
            ))}
          </DataGrid.Row>
          {row.getIsExpanded() && <DetailPanel row={row} />}
        </React.Fragment>
      )}
    </DataGrid.Body>
  </DataGrid.Root>
);
}

render(<ExpansionGrid />);