React TreeList - columnChooser.search
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
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>
- );
- }
timeout
Specifies a timeout, in milliseconds, during which a user may continue to modify the search value without starting the search operation.
Type:
Default Value: 500
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.