Documentation

Row Selection

Select one or many rows with checkboxes, click-to-select, keyboard, or the TableAPI.

Enable checkbox selection

Set enableRowSelection for a pinned checkbox column (multiple mode by default, with select-all in the header). Provide getRowId so selection survives sort, filter, and pagination.

React TSX

Copy

<SimpleTable
  enableRowSelection
  columns={columns}
  rows={rows}
  getRowId={({ row }) => String(row.id)}
/>

Handle selection changes

Use onRowSelectionChange for updates, or read selected rows from the table ref with getSelectedRowsData().

React TSX

Copy

<SimpleTable
  enableRowSelection
  columns={columns}
  rows={rows}
  getRowId={({ row }) => String(row.id)}
  onRowSelectionChange={({ row, isSelected, selectedRows }) => {
    // ...
  }}
/>

Patterns

Single selection

Set rowSelectionMode="single" when only one row should be selected. Selecting another row replaces the previous selection; the header select-all control is hidden.

React TSX

Copy

<SimpleTable
  enableRowSelection
  columns={columns}
  rows={rows}
  rowSelectionMode="single"
  getRowId={({ row }) => String(row.id)}
/>

Click to select

Use selectRowOnClick, hide the checkbox column with showRowSelectionColumn={false}, and set selectableCells={false} so clicks (and keyboard Space / arrows) drive row selection.

React TSX

Copy

<SimpleTable
  enableRowSelection
  columns={columns}
  rows={rows}
  selectRowOnClick
  showRowSelectionColumn={false}
  selectableCells={false}
  getRowId={({ row }) => String(row.id)}
/>

Programmatic selection

Call selectRow, toggleRowSelection, getSelectedRowsData, and clearRowSelection on the table API. See also Programmatic Control.

React TSX

Copy

tableRef.current?.selectRow("1", true);
tableRef.current?.toggleRowSelection("2");
const selected = tableRef.current?.getSelectedRowsData();
tableRef.current?.clearRowSelection();

Checkbox selection example

Library Management Demo

• Click the header checkbox to select/deselect all books

• Click individual row checkboxes to select specific books

Selected Books:None

StackBlitz

Single selection example

Selected: None

StackBlitz

Click to select example

Selected: None

StackBlitz

Programmatic selection example

Ready · Selected: None

StackBlitz

Props

Row Selection Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`enableRowSelection` boolean	Optional	Enables row selection via checkboxes, click, keyboard, or TableAPI.
`rowSelectionMode` enum	Optional	Multiple (default) allows many selected rows; single replaces the previous selection and hides select-all. Options: single multiple
`selectRowOnClick` boolean	Optional	Selecting a data cell selects the row. Prefer selectableCells={false} for a pure click-to-select UX.
`showRowSelectionColumn` boolean	Optional	When false, hides the checkbox column. Selection still works via click, keyboard, or API. Default true.
`getRowId` (props: { row: Row }) => string \| null \| undefined	Optional	Stable row id so selection survives sort, filter, and pagination.
`onRowSelectionChange` (props: RowSelectionChangeProps) => void	Optional	Fires when selection changes.

RowSelectionChangeProps

Property	Required	Description	Example
Property	Required	Description	Example
`row` Row	Required	The complete row object that was selected or deselected
`isSelected` boolean	Required	Boolean indicating whether the row was selected (true) or deselected (false)
`selectedRows` Set<string>	Required	Set containing the IDs of all currently selected rows