Transfer Table

ProNew

Two tables with a checkbox on each row and columns for the details people need to decide, with search over every column.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when a name is not enough to decide: assigning people (role, email), files (size, date), products (price, stock).

Do not use it for single-column items (use transfer-list).

Installation


pnpm dlx shadcn@latest add @tealmac-pro/transfer-table

It uses checkbox, input, transfer-list, which the CLI installs for you.

Usage

Props

Prop	Type	Default	Description
`rows`	`R[]`	-	All the rows.
`columns`	`TransferTableColumn<R>[]`	-	`id`, `header`, `cell?`, `searchText?`, `align?`.
`getRowId`	`(row) => string`	-	A stable id.
`isRowDisabled`	`(row) => boolean`	-	Rows that cannot move.
`value / defaultValue / onValueChange`	`string[]`	`[]`	Ids of the rows on the right.
`titles / searchable / emptyTexts`	-	-	As in `transfer-list`.

Accessibility

Each table is named by its title (aria-labelledby) and has column headers with scope=col.
Row checkboxes are named Select {first column}; the header checkbox shows the mixed state.
Moves are announced ("1 row moved to Selected.").
Locked rows are disabled and stay where they are.

Keyboard

Tab moves through the search field, the header checkbox and each row checkbox; Space toggles a checkbox.
The move buttons between the tables are in the tab order.

Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.

Testing

The component ships with a Testing Library test (transfer-table.test.tsx) that covers its keyboard paths, roles and states.

Guide and examples

When to use it

Use it when a name is not enough to decide: assigning people (role, email), files (size, date), products (price, stock).

Do not use it for single-column items (use transfer-list).

Installation


pnpm dlx shadcn@latest add @tealmac-pro/transfer-table

It uses checkbox, input, transfer-list, which the CLI installs for you.

Usage

Props

Prop	Type	Default	Description
`rows`	`R[]`	-	All the rows.
`columns`	`TransferTableColumn<R>[]`	-	`id`, `header`, `cell?`, `searchText?`, `align?`.
`getRowId`	`(row) => string`	-	A stable id.
`isRowDisabled`	`(row) => boolean`	-	Rows that cannot move.
`value / defaultValue / onValueChange`	`string[]`	`[]`	Ids of the rows on the right.
`titles / searchable / emptyTexts`	-	-	As in `transfer-list`.

Accessibility

Each table is named by its title (aria-labelledby) and has column headers with scope=col.
Row checkboxes are named Select {first column}; the header checkbox shows the mixed state.
Moves are announced ("1 row moved to Selected.").
Locked rows are disabled and stay where they are.

Keyboard

Tab moves through the search field, the header checkbox and each row checkbox; Space toggles a checkbox.
The move buttons between the tables are in the tab order.

Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.

Testing

The component ships with a Testing Library test (transfer-table.test.tsx) that covers its keyboard paths, roles and states.