Row Selection

Rowstack includes built-in support for single and multi-row selection, allowing users to select records for batch actions or detailed viewing.

#Enabling Row Selection

Row selection is controlled via the config prop:

const config = {
  selectRow: {
    enabled: true
  }
};

When enabled, a checkbox column will appear at the far left of the table.

#Interaction

#Selection Checkboxes

• Header Checkbox: Click to select or deselect all rows across all pages.
• Row Checkbox: Click to select or deselect an individual row.

#Keyboard Support

• Focus on a row and press Space to toggle its selection status.

#Programmatic Access

The selected rows are part of the table's managed state. Any changes to the selection will trigger the onChange callback, providing you with the full set of selected IDs or records.

<Table 
  data={data} 
  columns={columns} 
  onChange={(state) => {
    // state contains information about selected rows
    console.log("Selected rows:", state.selectedRowIds);
  }} 
/>

#Use Cases

• Batch Deletion: Select multiple rows and click a custom "Delete" button.
• Bulk Updates: Change a status or category for many records at once.
• Exporting: Export only the selected records to CSV or PDF.