AdaptTable for Base UI

Row selection in Base UI

Tick rows one at a time or take the whole page from the header box. The selection is a set of ids rather than a slice of what is rendered, so a row chosen on page one is still chosen while page three is on screen.

Bulk actions run against that set, can ask for confirmation first, and report back through your own handler — the table never performs the write.

Selection is controllable: hand it selectedIds and onSelectionChange and it becomes state your app owns.

Base UI's Checkbox draws a genuine mixed state — a dash rather than a tick — and where a box carries a visible label the part moves to the label wrapper, because that is the element Base UI names.

The code

import { DataTable } from "@adapttable/base-ui";

export function People({ rows, columns, onArchive }) {
  return (
    <DataTable
      data={rows}
      columns={columns}
      rowKey={(row) => row.id}
      bulkActions={[
        {
          key: "archive",
          label: "Archive",
          confirm: true,
          onAction: (ids) => onArchive(ids),
        },
      ]}
    />
  );
}

Install

pnpm add @adapttable/base-ui @adapttable/core @base-ui/react

The same feature in the other kits

More Base UI features

Reference: selection. More of this kit: AdaptTable for Base UI, or the live demo.