This sample demonstrates how users can dynamically show or hide columns using the Column Chooser feature. It highlights flexible column visibility management through an interactive Grid interface.
The Column Chooser feature enables users to dynamically control the visibility of columns in the Grid. To enable this functionality, set the
showColumnChooser property to true and include the “ColumnChooser” item in the toolbar. To prevent specific columns from appearing in the Column Chooser, set the columns.showInColumnChooser property to false.
Column visibility is managed by selecting or deselecting checkboxes in the Column Chooser dialog:
columnChooserSettings.mode property to Immediate.In this demo, the column chooser mode can be switched using the "Immediate Column Chooser Mode" checkbox. When the column chooser button in the toolbar is clicked, it opens the dialog according to the selected mode, allowing users to show or hide columns by selecting or clearing the corresponding checkboxes.
Injecting Module:
Grid component features are segregated into individual feature-wise modules. To use column chooser feature and toolbar functionality, inject the required modules ColumnChooser and Toolbar into the services.
More information on column chooser configuration can be found in the documentation.
Looking for the full React Data Grid component overview, features, pricing, and documentation? Visit our React Data Grid component page.