Documentation

Cell Highlighting

Cell highlighting allows users to select and visually emphasize specific cells or ranges of cells within your tables. This is especially useful for copy-paste operations, data analysis, and drawing attention to important values.

CodeSandbox

Basic Cell Selection

Enable cell selection by adding the selectableCells and selectableColumns props to your SimpleTable component. This enables users to select individual cells and entire columns.

Cell Highlighting Properties

PropertyRequiredDescriptionExample
selectableCells
boolean
Optional
Enable selection of individual cells. When enabled, users can click on cells to select them and use keyboard shortcuts to copy the selected data.
selectableColumns
boolean
Optional
Enable selection of entire columns. When enabled, users can click on column headers to select all cells in that column.
copyHeadersToClipboard
boolean
Optional
When true, includes column headers as the first row when copying selected cells to clipboard. Defaults to false.

Selection Behavior

When selection is enabled, users can:

  • Click on individual cells to select them
  • Click on column headers to select entire columns
  • Use keyboard shortcuts (Ctrl+C/⌘+C) to copy selected data
  • Paste the data into spreadsheet applications

Keyboard Navigation

Cell selection supports powerful keyboard shortcuts for efficient navigation and selection:

Shift + Arrow Keys
Extend selection in the direction of the arrow
Ctrl/⌘ + A
Select all cells
Ctrl/⌘ + Shift + Arrow Keys
Extend selection to edge of data region
Home / End
Navigate to first/last column in current row
Ctrl/⌘ + Home / End
Navigate to first/last cell in table
Page Up / Page Down
Navigate up/down by visible page

Copy-Paste Integration

Cell highlighting works seamlessly with Simple Table's built-in copy-paste functionality:

  • Copy selected cells or ranges to the clipboard using Ctrl+C/⌘+C
  • Paste data from external sources using Ctrl+V/⌘+V
  • Data formatting is preserved when copying between tables and spreadsheet applications
  • Multi-cell selection enables efficient bulk copy operations

Paste Restrictions

When pasting data into your table, only columns marked with isEditable: true will accept the pasted values. Non-editable columns will be automatically skipped during paste operations, ensuring data integrity and preventing accidental modification of read-only fields like IDs or calculated values.

Pro Tip

Combine cell highlighting with column editing capabilities to create powerful data entry workflows. Users can select ranges, copy from spreadsheets, and paste directly into editable columns for efficient bulk data operations.