A plugin that manages Grid columns' visibility.
Use the following statement to import a plugin with embedded theme components:
import { TableColumnVisibility } from '@devexpress/dx-react-grid-material-ui';
// import { TableColumnVisibility } from '@devexpress/dx-react-grid-bootstrap4';
// import { TableColumnVisibility } from '@devexpress/dx-react-grid-bootstrap3';If you want to use custom components, you can import the themeless plugin:
import { TableColumnVisibility } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| hiddenColumnNames? | Array<string> | Hidden column names. | |
| defaultHiddenColumnNames? | Array<string> | [] | Names of initially hidden columns in the uncontrolled mode. |
| columnTogglingEnabled? | boolean | true | Specifies whether an end-user can change column visibility. |
| columnExtensions? | Array<TableColumnVisibility.ColumnExtension> | Additional column properties that the plugin can handle. | |
| onHiddenColumnNamesChange? | (hiddenColumnNames: Array<string>) => void | Handles hidden columns adding or removing. | |
| emptyMessageComponent | ComponentType<TableColumnVisibility.EmptyMessageProps> | A component that renders a message that is displayed when all columns are hidden. | |
| messages? | TableColumnVisibility.LocalizationMessages | An object that specifies localization messages. |
Describes the empty message component's properties.
| Field | Type | Description |
|---|---|---|
| getMessage | (messageKey: string) => string | Returns the text displayed when all columns are hidden. |
Describes additional column properties that the plugin can handle.
| Field | Type | Description |
|---|---|---|
| columnName | string | The name of a column to extend. |
| togglingEnabled | boolean | Specifies whether an end-user can change column visibility. |
| Field | Type | Default | Description |
|---|---|---|---|
| noColumns? | string | 'Nothing to show' | Specifies the text that is displayed when the plugin does not contain visible columns. |
| Name | Properties | Description |
|---|---|---|
| TableColumnVisibility.EmptyMessage | TableColumnVisibility.EmptyMessageProps | A component that renders a message displayed when all columns are hidden. |
Additional properties are added to the component's root element.
| Name | Plugin | Type | Description |
|---|---|---|---|
| tableColumns | Getter | Array<TableColumn> | Table columns. |
| table | Template | object? | A template that renders a table. |
| Name | Plugin | Type | Description |
|---|---|---|---|
| tableColumns | Getter | Array<TableColumn> | Visible table columns. |
| hiddenColumnNames | Getter | Array<string> | Hidden table column names. |
| isColumnTogglingEnabled | Getter | (columnName: string) => boolean | A function used to define if an end-user can change column visibility. |
| toggleColumnVisibility | Action | ({ columnName: string }) => void | Toggles a column's visibility. |