Documentation

Column Visibility

Column visibility lets users show or hide columns through the column editor. They can search, drag to reorder, and toggle which columns appear in the grid.

StackBlitz

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

customRenderer replaces the default popout. When the table uses left and right pin regions, the built-in layout may show left-pinned, main, and right-pinned columns as separate lists. Set allowColumnPinning: false on columnEditorConfig to hide pin controls while keeping drag and visibility toggles (ColumnEditorConfig). Besides searchSection, listSection, and resetColumns, you can receive pinnedLeftList, unpinnedList, and pinnedRightList when the UI is split by pin section.

StackBlitz

Custom Column Editor Row Layout

rowRenderer controls each row’s layout; props include panelSection, isEssential, canToggleVisibility, allowColumnPinning, and pinControl. See ColumnEditorRowRendererProps.