AdaptTable for Radix

Row selection in Radix

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.

Every box is a Radix Checkbox with a real mixed state, and the bulk bar is a plain Flex of Buttons — Radix's Callout is saved for the error chrome rather than spent on a toolbar.

The code

import { DataTable } from "@adapttable/radix";

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/radix @adapttable/core @radix-ui/themes

The same feature in the other kits

More Radix features

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