Documentation

Row Selection

Row selection enables users to select one or multiple rows in your table for bulk operations, data export, or interactive workflows. This feature includes checkboxes in each row and a header checkbox for select-all functionality.

Library Management Demo

• Click the header checkbox to select/deselect all books

• Click individual row checkboxes to select specific books

Selected Books:
CodeSandbox

Basic Row Selection

Enable row selection by adding the enableRowSelection prop to your SimpleTable component. This adds checkboxes to each row and the header for easy selection management.

Row Selection Properties

PropertyRequiredDescriptionExample
enableRowSelection
boolean
Optional
Enable row selection functionality. When enabled, users can select individual rows or all rows using checkboxes.
onRowSelectionChange
(props: RowSelectionChangeProps) => void
Optional
Callback function triggered when row selection changes. Receives information about the selected row and current selection state.

Selection Behavior

When row selection is enabled, users can:

  • Click individual row checkboxes to select/deselect specific rows
  • Click the header checkbox to select or deselect all rows at once
  • Use keyboard navigation to interact with checkboxes
  • Maintain selection state during sorting, filtering, and pagination

Handling Selection Changes

Use the onRowSelectionChange callback to respond to selection changes and implement your business logic:

RowSelectionChangeProps

PropertyRequiredDescriptionExample
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

Example Usage

const handleRowSelectionChange = ({ row, isSelected, selectedRows }) => {
  if (isSelected) {
    console.log(`Selected: ${row.name}`);
  } else {
    console.log(`Deselected: ${row.name}`);
  }
  
  // Convert Set to Array for further processing
  const selectedRowsArray = Array.from(selectedRows);
  console.log(`Total selected: ${selectedRowsArray.length}`);
  
  // Implement your business logic here
  handleBulkOperations(selectedRowsArray);
};

Common Use Cases

Row selection is essential for many interactive table scenarios:

  • Bulk Operations: Delete, update, or process multiple records simultaneously
  • Data Export: Allow users to select specific rows for export to CSV, Excel, or other formats
  • Batch Actions: Apply actions like status changes, category assignments, or approvals to multiple items
  • Comparison Views: Select multiple items to compare their properties side-by-side
  • Workflow Management: Move selected items through different stages of a process

Performance Tip

The selectedRows parameter uses a Set for optimal performance when dealing with large datasets. Convert to an Array only when needed for your specific operations.

Accessibility Note

Row selection checkboxes are fully accessible with proper ARIA labels and keyboard navigation support. Users can navigate using Tab/Shift+Tab and select/deselect using Space or Enter keys.