React Grid - Column Visibility

A Grid component with the TableColumnVisibility and ColumnChooser plugins provides the capability to hide or show table columns at runtime.

Related Plugins

• TableColumnVisibility - manages column visibility.
• Toolbar - renders the Grid Toolbar.
• ColumnChooser - implements the column chooser.

Basic Setup

Import the plugins listed above to enable a user to hide or show columns at runtime.

Uncontrolled Mode

In uncontrolled mode, specify initially hidden column names via the TableColumnVisibility plugin's defaultHiddenColumnNames property.

Controlled Mode

In controlled mode, pass the hidden column names to the TableColumnVisibility plugin's hiddenColumnNames property and handle the onHiddenColumnNamesChange event to control column visibility externally.

Disallow Toggling Column Visibility

You can use the TableColumnVisibility plugin's columnExtensions property to prevent changing to a specific column's visibility.