Documentation

Column Visibility

Column visibility controls allow users to show or hide specific columns through the column editor. Users can search for columns, reorder them via drag-and-drop, and toggle visibility to customize their view and focus on the most relevant data.

CodeSandbox

Basic Implementation

Column visibility can be controlled using the hide property in the header objects and the editColumns prop on the SimpleTable component.

Column Visibility Configuration

PropertyRequiredDescriptionExample
HeaderObject.hide
boolean
Optional
Controls the initial visibility of the column. When true, the column will be hidden by default.
editColumns
boolean
Optional
Enables the column visibility controls, allowing users to show/hide columns through a UI panel.
editColumnsInitOpen
boolean
Optional
Opens the column visibility menu by default when the table loads. Requires editColumns to be true.
onColumnVisibilityChange
(visibilityState: ColumnVisibilityState) => void
Optional
Callback triggered when column visibility changes. Receives a ColumnVisibilityState object mapping each column accessor to its visibility state (true = visible, false = hidden). Perfect for persisting user preferences or syncing visibility state with external storage.
HeaderObject.excludeFromRender
boolean
Optional
When true, excludes the column from both the rendered table and the column editor. The column is still included in CSV exports. Useful for ID columns or metadata that should be exported but not displayed or toggled by users.

Custom Column Editor Layout

Use customRenderer in columnEditorConfig to fully control the column editor popout layout. It receives searchSection, listSection, and resetColumns

CodeSandbox

Custom Column Editor Row Layout

Use rowRenderer in columnEditorConfig to reorder components in the column editor drawer.

<SimpleTable
  columnEditorConfig={{
    rowRenderer: ({ components }) => (
      <div style={{ display: 'flex', gap: '8px' }}>
        {components.checkbox}
        {components.dragIcon}
        {components.labelContent}
      </div>
    )
  }}
  // ... other props
/>