React TreeList - Column Chooser
The column chooser allows a user to change the set of columns at runtime. It is configured using the columnChooser object and may operate in two modes: the default drag and drop mode and the select mode designed for touch devices.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import TreeList, {
- ColumnChooser
- } from 'devextreme-react/tree-list';
- export default function App() {
- return (
- <TreeList ... >
- <ColumnChooser
- enabled={true}
- mode="dragAndDrop" {/* or "select" */}
- />
- </TreeList>
- );
- }
Set a column's allowHiding property to false if it should never be hidden. For columns whose headers should never appear in the column chooser, set the showInColumnChooser property to false.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import TreeList, {
- ColumnChooser,
- Column
- } from 'devextreme-react/tree-list';
- export default function App() {
- return (
- <TreeList ... >
- <ColumnChooser
- enabled={true}
- />
- <Column ...
- allowHiding={false} {/* cannot be hidden */}
- />
- <Column ...
- showInColumnChooser={false}> {/* does not appear in the column chooser even when hidden */}
- />
- </TreeList>
- );
- }
Call the showColumnChooser() or hideColumnChooser() method to control the column chooser programmatically.
App.js
- import React, { useRef } from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import TreeList from 'devextreme-react/tree-list';
- export default function App() {
- const treeList = useRef(null);
- const showColumnChooser = () => {
- treeList.current.instance().showColumnChooser();
- }
- const hideColumnChooser = () => {
- treeList.current.instance().hideColumnChooser();
- }
- return (
- <TreeList ref={treeList}>
- {/* ... */ }
- </TreeList>
- );
- }
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.