The ColumnChooser plugin allows a user to toggle grid columns' visibility at runtime. The column chooser lists columns with checkboxes that control a corresponding column's visibility.
Use the following statement to import a plugin with embedded theme components:
import { ColumnChooser } from '@devexpress/dx-react-grid-material-ui';
// import { ColumnChooser } from '@devexpress/dx-react-grid-bootstrap4';
// import { ColumnChooser } from '@devexpress/dx-react-grid-bootstrap3';If you want to use custom components, you can import the themeless plugin:
import { ColumnChooser } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| overlayComponent | ComponentType<ColumnChooser.OverlayProps> | A component that renders the column chooser overlay. | |
| toggleButtonComponent | ComponentType<ColumnChooser.ToggleButtonProps> | A component that renders a button that invokes the column chooser. | |
| containerComponent | ComponentType<ColumnChooser.ContainerProps> | A component that renders the column chooser container. | |
| itemComponent | ComponentType<ColumnChooser.ItemProps> | A component that renders a column chooser item. | |
| messages? | ColumnChooser.LocalizationMessages | An object that specifies localization messages. |
Describes properties passed to a component that renders the column chooser overlay.
| Field | Type | Description |
|---|---|---|
| visible | boolean | Specifies whether the overlay is visible. |
| target | ReactInstance | A React component instance or a DOM element that is used for overlay positioning. |
| onHide | () => void | An event that initiates overlay hiding. |
| children | ReactNode | A React node used to render overlay content. |
Describes properties passed to a component that renders the button that invokes the column chooser.
| Field | Type | Description |
|---|---|---|
| onToggle | () => void | An event that initiates overlay showing or hiding. |
| getMessage | (messageKey: string) => string | Returns a specified localization message. Available in the "@devexpress/dx-react-grid-material-ui" package. |
| buttonRef | (ref: ReactInstance) => void | A function that accepts the button's root React element. |
Describes properties passed to a component that renders the column chooser container.
| Field | Type | Description |
|---|---|---|
| children | ReactNode | A React node used to render column chooser items. |
Describes properties passed to a component that renders a column chooser item.
| Field | Type | Description |
|---|---|---|
| item | ColumnChooserItem | A column chooser item. |
| disabled | boolean | Specifies whether a column chooser item is disabled. |
| onToggle | () => void | Handles an associated column's visibility changes. |
An object representing a column chooser item.
| Field | Type | Description |
|---|---|---|
| column | Column | The grid column associated with the item. |
| hidden | boolean | Specifies whether the associated column is hidden. |
| Field | Type | Default | Description |
|---|---|---|---|
| showColumnChooser? | string | 'Show Column Chooser' | The toggle button's tooltip text. Available in the "@devexpress/dx-react-grid-material-ui" package. |
| Name | Properties | Description |
|---|---|---|
| ColumnChooser.ToggleButton | ColumnChooser.ToggleButtonProps | A component that renders a button that invokes the column chooser. |
| ColumnChooser.Overlay | ColumnChooser.OverlayProps | A component that renders the column chooser overlay. |
| ColumnChooser.Container | ColumnChooser.ContainerProps | A component that renders the column chooser container. |
| ColumnChooser.Item | ColumnChooser.ItemProps | A component that renders a column chooser item. |
Additional properties are added to a component's root element.
| Name | Plugin | Type | Description |
|---|---|---|---|
| columns | Getter | Array<Column> | Grid columns. |
| hiddenColumnNames | Getter | Array<string> | Names of columns to be hidden. |
| 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. |
| toolbarContent | Template | object? | A template that renders toolbar content. |
none