Overview
Column visibility allows you to control which columns are visible in the Data Grid. Users can access this feature through the column menu to show/manage columns.
There will be two options presented to the user:
- Hide: Hides the column from view.
- Manage: Allows the user to manage the visibility of all columns.
Once a column is hidden, it will not be visible in the Data Grid and the only way to show it is through the Manage option.
When there is only a single visible column left in the Grid, only the Manage option will be displayed.
How it works
When the visibility feature is enabled and the Manage popover is displayed, the user will see the list of all columns and can toggle their visibility via the checkbox next to each column.
If the column list equals or exceeds 7 columns, a Search input will be displayed to filter the column list.
Implementing column visibility
You must opt-in to the column visibility feature by setting the features.visibility prop to true or by utilizing the options object. Doing so will display the visibility options in the column menu.
Default Visibility
To set a column to be hidden by default, you can use the defaultHidden property
in the features.visibility object.
Options
The visibility feature accepts either a boolean or an object with the following properties:
| Params | Required | Description |
|---|---|---|
defaultHidden | false | Whether the column should be hidden by default. |