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>
  • );
  • }

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component TreeList ColumnChooser DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component TreeList ColumnChooser

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>
  • );
  • }

View Demo

See Also