Documentation

Column Editing

Column editing enables users to modify table structure dynamically by editing column names, reordering columns via drag-and-drop, searching for specific 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 the column editor with editColumns= to show/hide columns and reorder them via drag-and-drop
Configure the column editor with columnEditorConfig to customize button text, enable search, and more
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.

Column Editor Configuration

The column editor can be customized using the columnEditorConfig prop. This provides comprehensive control over the column editor's appearance and behavior.

<SimpleTable
  editColumns={true}
  columnEditorConfig={{
    text: "Columns",                      // Button text (default: "Columns")
    searchEnabled: true,                  // Enable search (default: true)
    searchPlaceholder: "Search columns...", // Search placeholder
    searchFunction: (header, searchTerm) => { // Optional: custom search logic
      return header.label.toLowerCase().includes(searchTerm.toLowerCase());
    }
  }}
  // ... other props
/>

Column Search

The column editor includes built-in search functionality that allows users to quickly find columns by typing in the search box. The search automatically expands nested headers to show matching columns.

Tip: Search is enabled by default. Set searchEnabled: false in columnEditorConfig to disable it.

Drag and Drop Column Reordering

Users can reorder columns by dragging them within the column editor. A visual separator line shows where the column will be dropped. This works alongside the existing header drag-and-drop functionality.

Note: Drag-and-drop in the column editor is automatically enabled when editColumns=. No additional configuration needed!

Programmatic Column Visibility Control

Simple Table provides powerful API methods for programmatically controlling column visibility and the column editor menu. These methods are available through the table ref and enable you to build custom column visibility controls, presets, and views.

toggleColumnEditor()

Opens, closes, or toggles the column editor menu programmatically. This gives you full control over when the column editor UI is displayed.

// Toggle the column editor (open if closed, close if open)
tableRef.current?.toggleColumnEditor();

// Explicitly open the column editor
tableRef.current?.toggleColumnEditor(true);

// Explicitly close the column editor
tableRef.current?.toggleColumnEditor(false);

applyColumnVisibility()

Programmatically controls which columns are visible in the table. You can pass a partial or complete visibility state object to show or hide specific columns. This method is async and returns a Promise.

// Show/hide specific columns
await tableRef.current?.applyColumnVisibility({
  name: true,      // Show name column
  email: false,    // Hide email column
  phone: false,    // Hide phone column
});

// Create a "basic info" view preset
await tableRef.current?.applyColumnVisibility({
  name: true,
  age: true,
  department: true,
  salary: false,
  email: false,
  phone: false,
});

// Show all columns
await tableRef.current?.applyColumnVisibility({
  name: true,
  age: true,
  department: true,
  salary: true,
  email: true,
  phone: true,
});

// Hide just contact columns (partial update)
await tableRef.current?.applyColumnVisibility({
  email: false,
  phone: false,
});

Tip: You can combine these methods to create powerful column visibility workflows. For example, open the column editor programmatically and apply a preset view at the same time.

Use Cases

View Presets: Create predefined column visibility configurations like "Basic Info", "Contact Details", "Financial View", etc.
User Preferences: Save and restore user-specific column visibility preferences across sessions
Responsive Layouts: Automatically hide less important columns on smaller screens
Guided Tours: Control column visibility during onboarding or tutorial flows
Context-Aware Views: Show different columns based on user role, permissions, or current workflow