Row Selection

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 },
];

// 행 선택 체크박스 컬럼 — 아래는 createSelectColumn이 하는 일을 인라인으로 풀어쓴 최소 버전입니다.
//   (실제 프로젝트에서는 공용 createSelectColumn 팩토리로 한 곳에서 소유하세요.)
const columns = [
{
  id: '_select',
  size: 44,
  enableSorting: false,
  meta: { columnRole: 'control' },
  header: ({ header, table }) => (
    <DataGrid.HeaderCell
      header={header}
      $css={{ cursor: 'pointer' }}
      onClick={() => table.toggleAllRowsSelected()}
    >
      <Center $css={{ width: '100%', height: '100%' }}>
        <Checkbox
          aria-label="전체 선택"
          size="sm"
          checked={table.getIsAllRowsSelected()}
          indeterminate={table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()}
          onChange={table.getToggleAllRowsSelectedHandler()}
          onClick={(e) => e.stopPropagation()}
        />
      </Center>
    </DataGrid.HeaderCell>
  ),
  cell: (info) => (
    <DataGrid.Cell
      cell={info.cell}
      $css={{ cursor: 'pointer' }}
      onClick={() => info.row.getCanSelect() && info.row.toggleSelected()}
    >
      <Center $css={{ width: '100%', height: '100%' }}>
        <Checkbox
          aria-label={info.row.original.name + ' 선택'}
          size="sm"
          disabled={!info.row.getCanSelect()}
          checked={info.row.getIsSelected()}
          onChange={info.row.getToggleSelectedHandler()}
          onClick={(e) => e.stopPropagation()}
        />
      </Center>
    </DataGrid.Cell>
  ),
},
{
  accessorKey: 'name',
  header: ({ header }) => <DataGrid.HeaderCell header={header}>채널</DataGrid.HeaderCell>,
  cell: (info) => <DataGrid.Cell cell={info.cell}>{info.getValue()}</DataGrid.Cell>,
},
{
  accessorKey: 'followers',
  header: ({ header }) => <DataGrid.HeaderCell header={header}>팔로워</DataGrid.HeaderCell>,
  cell: (info) => <DataGrid.Cell cell={info.cell}>{info.getValue().toLocaleString()}</DataGrid.Cell>,
},
];

function RowSelectGrid() {
const [rowSelection, setRowSelection] = useState({});
const table = useDataGrid({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getRowId: (row) => row.id,
  state: { rowSelection },
  onRowSelectionChange: setRowSelection,
  enableRowSelection: true,
});
const selectedCount = table.getSelectedRowModel().rows.length;
return (
  <VStack $css={{ gap: '$spacing-200' }}>
    <Typo variant="$caption-1" $css={{ color: '$text-3' }}>
      선택됨: {selectedCount} / {data.length}
    </Typo>
    <DataGrid.Root table={table} size="md">
      <DataGrid.Header />
      <DataGrid.Body />
    </DataGrid.Root>
  </VStack>
);
}

render(<RowSelectGrid />);