Row Selection

Select rows with single-click or checkboxes. Supports single selection, multi-selection, and sub-row selection.

How to Enable

const table = useTable({
  data,
  columns,
  enableRowSelection: true,       // or (row) => boolean for conditional
  enableMultiRowSelection: true,   // Allow selecting multiple rows
  enableSubRowSelection: true,     // Select sub-rows when parent is selected
  onRowSelectionChange: (updater) => { /* handle changes */ },
})

Programmatic Control

// Select a row
table.getRow('0').toggleSelected(true)

// Toggle
table.getRow('0').toggleSelected()

// Select all rows on current page
table.toggleAllPageRowsSelected(true)

// Select all rows (all pages)
table.toggleAllRowsSelected(true)

// Check selection state
table.getRow('0').getIsSelected()         // boolean
table.getIsAllRowsSelected()               // boolean
table.getIsSomeRowsSelected()              // boolean
table.getIsAllPageRowsSelected()           // boolean
table.getSelectedRowModel()                // RowModel of selected rows

// Clear selection
table.resetRowSelection(true)

Selection Column Pattern

Add a checkbox column for row selection:

columnHelper.display({
  id: 'selection',
  header: ({ table }) => (
    <input
      type="checkbox"
      checked={table.getIsAllPageRowsSelected()}
      onChange={table.toggleAllPageRowsSelected}
    />
  ),
  cell: ({ row }) => (
    <input
      type="checkbox"
      checked={row.getIsSelected()}
      onChange={row.getToggleSelectedHandler()}
    />
  ),
})

---