React TreeList - columnChooser.search

Configures the column chooser's search functionality.

Selector: Search

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import TreeList, {
  • ColumnChooser,
  • ColumnChooserSearch,
  • // ...
  • } from 'devextreme-react/data-grid';
  •  
  • const searchEditorOptions = {
  • placeholder: 'Search column',
  • mode: 'text'
  • };
  •  
  • export default function App() {
  • return (
  • <TreeList ... >
  • <ColumnChooser ... >
  • <ColumnChooserSearch
  • editorOptions={searchEditorOptions}
  • enabled={true}
  • timeout={800}
  • />
  • </ColumnChooser>
  • </TreeList>
  • );
  • }

editorOptions

Configures the search box.

Type: any
Default Value: {}

See the TextBox Configuration topic for information about properties you can specify in this object.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import TreeList, {
  • ColumnChooser,
  • ColumnChooserSearch,
  • // ...
  • } from 'devextreme-react/data-grid';
  •  
  • const searchEditorOptions = {
  • placeholder: 'Search column',
  • mode: 'text',
  • onValueChanged: (e) => {
  • // handle the value change here
  • }
  • };
  •  
  • export default function App() {
  • return (
  • <TreeList ... >
  • <ColumnChooser ... >
  • <ColumnChooserSearch
  • editorOptions={searchEditorOptions}
  • // ...
  • />
  • </ColumnChooser>
  • </TreeList>
  • );
  • }

enabled

Specifies whether search is enabled in the column chooser.

Type:

Boolean

Default Value: false

timeout

Specifies a timeout, in milliseconds, during which a user may continue to modify the search value without starting the search operation.

Type:

Number

Default Value: 500