데이터 테이블

import { Table, Checkbox, Pagination, useTableSelection } from '@surflane/ui'

// Product-owned state: query, filters, sorting, selected stable IDs, page, columns.
const sorted = stableSort(filter(rows, query), sort)
const visible = sorted.slice((page - 1) * size, page * size)
const selection = useTableSelection({
  rows: visible,
  getId: (row) => row.id,
  canSelect: (row) => row.canManage,
  selected,
  onSelectedChange: setSelected,
})

<Table.Container label='Resource comparison' orientation='horizontal'>
  <Table.Root aria-busy={loading || undefined}>
    <Table.Caption>Resources</Table.Caption>
    <Table.Head>
      <Table.Row>
        <Table.HeaderCell scope='col'>
          <Checkbox.Root
            aria-label='Select manageable rows on this page'
            {...selection.pageCheckbox}
          >
            <Checkbox.Indicator />
          </Checkbox.Root>
        </Table.HeaderCell>
        <Table.SortHeader
          sort={sortOf('name')}
          onSort={() => toggleSort('name')}
        >
          Name
        </Table.SortHeader>
        <Table.SortHeader
          numeric
          sort={sortOf('instances')}
          onSort={() => toggleSort('instances')}
        >
          Instances
        </Table.SortHeader>
      </Table.Row>
    </Table.Head>
    <Table.Body>
      {error ? (
        <Table.Message colSpan={3}>…retry…</Table.Message>
      ) : (
        visible.map((row) => (
          <Table.Row key={row.id} selected={selection.isSelected(row.id)}>
            <Table.Cell>
              <Checkbox.Root
                aria-label={`Select ${row.name}`}
                {...selection.rowCheckbox(row)}
              >
                <Checkbox.Indicator />
              </Checkbox.Root>
            </Table.Cell>
            <Table.HeaderCell scope='row'>
              <a href={row.href}>{row.name}</a>
            </Table.HeaderCell>
            <Table.Cell numeric>{row.instances}</Table.Cell>
          </Table.Row>
        ))
      )}
    </Table.Body>
  </Table.Root>
</Table.Container>
<Pagination page={page} pageCount={pageCount} onPageChange={setPage} />

// Reset page on filter/sort/page-size changes and clamp after response changes.
// Header selection is only the current page's manageable rows, not all results.
// Revalidate selected IDs against authorization on the server before mutation.