Documentation

Cell Editing

Simple Table provides powerful cell editing capabilities, allowing users to modify data directly within the table interface. This creates a more interactive and efficient user experience for data entry and management. Unlike competitors, Simple Table provides specialized editors for different data types including strings, numbers, dates, booleans, and enumerated values.

CodeSandbox

Basic Editing Setup

To enable cell editing in Simple Table, you need to:

  1. Add the isEditable: true property to the columns you want to make editable
  2. Provide an onCellEdit handler to manage the data updates

Cell Editing Properties

PropertyRequiredDescriptionExample
HeaderObject.isEditable
boolean
Optional
Makes a column editable, allowing users to modify cell values directly within the table interface.
HeaderObject.type
enum
Optional
Specifies the data type and editor for the column. Simple Table provides specialized editors for different data types.
Options:
string
number
boolean
date
enum
onCellEdit
(props: CellChangeProps) => void
Optional
Callback function that is triggered when a cell value is edited. Receives the cell change properties including accessor, newValue, and row data.

Copy-Paste Functionality

Simple Table includes built-in copy-paste functionality that works seamlessly with cell editing:

  • Users can copy data from any selected cells using keyboard shortcuts (Ctrl+C/⌘+C)
  • Data can be pasted from external sources like spreadsheets or other applications
  • Important: Pasting is only allowed into columns that have isEditable: true
  • Non-editable columns will be skipped during paste operations

Copy-Paste Restrictions

When pasting data, only columns marked with isEditable: true will accept the pasted values. This ensures data integrity and prevents accidental modification of read-only columns like IDs or calculated fields.