Documentation

Column Editing

Column editing enables users to modify table structure dynamically by editing column names, adding new columns, and customizing the table layout. This feature is essential for building flexible data management interfaces.

CodeSandbox

Basic Column Editing

To enable column editing in Simple Table, you can use several approaches:

Enable column selection with selectableColumns= (required for column editing to work)
Enable header editing with enableHeaderEditing=
Provide an onHeaderEdit callback to handle header changes
Use headerRenderer to add custom controls like "Add Column" buttons
Manage column state dynamically to add or remove columns

Column Editing Properties

Property	Required	Description

`selectableColumns` boolean	Required	Required for column editing to work. Enables column selection and interaction functionality that column editing depends on.
`enableHeaderEditing` boolean	Optional	Enables header editing functionality. When true, users can double-click on column headers to edit their labels.
`onHeaderEdit` (headerIndex: number, newLabel: string) => void	Optional	Callback function triggered when a column header is edited. Receives the header index and new label value.
`editColumns` boolean	Optional	General prop that enables column editing capabilities. This can include adding, removing, or modifying columns.
`HeaderObject.headerRenderer` React.ComponentType<HeaderRendererProps>	Optional	Custom renderer for column headers. Can be used to add buttons, dropdowns, or other interactive elements to column headers.