React Grid - Searching

The Grid component supports searching data programmatically or using the value an end user types in the corresponding Search Panel editor.

The following plugins implement the searching feature:

Note that plugin order is important.

Basic Setup

Import the plugins listed above to set up a Grid with basic searching.

Uncontrolled Mode

In uncontrolled mode, specify the initial searching value in the SearchState plugin's defaultValue property.

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React
Migrate to DevExtreme React
DevExtreme Reactive product line is now in maintenance support mode. If you're building a React app, consider our up-to-date DevExtreme React UI suite. For more information, visit the Migrate from DevExtreme Reactive help topic on the DevExtreme React site.

Controlled Mode

In controlled mode, pass the search option to the SearchState plugin's value property and handle the onValueChange event to control the search state externally.

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React
Migrate to DevExtreme React
DevExtreme Reactive product line is now in maintenance support mode. If you're building a React app, consider our up-to-date DevExtreme React UI suite. For more information, visit the Migrate from DevExtreme Reactive help topic on the DevExtreme React site.

Search in Visible Columns Only

The Grid component searches all columns, including those that are hidden using the TableColumnVisibility plugin. To prevent a search through invisible columns, use the IntegratedFiltering plugin's columnExtensions property.

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React
Migrate to DevExtreme React
DevExtreme Reactive product line is now in maintenance support mode. If you're building a React app, consider our up-to-date DevExtreme React UI suite. For more information, visit the Migrate from DevExtreme Reactive help topic on the DevExtreme React site.

Remote Searching

You can perform a search remotely by handling search value changes, generating a request, and sending it to the server.

Searching options are updated once an end user modifies the text in a Search Panel editor or other searching control. Handle search value changes using the SearchState plugin's onValueChange event and request data from the server using the applied searching options. Once the search data is received from the server, pass it to the Grid component's rows property.

NOTE: Do not use the IntegratedFiltering plugin for remote searching.

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React
Migrate to DevExtreme React
DevExtreme Reactive product line is now in maintenance support mode. If you're building a React app, consider our up-to-date DevExtreme React UI suite. For more information, visit the Migrate from DevExtreme Reactive help topic on the DevExtreme React site.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies. For more information, refer to DevExpress’ privacy policy and cookie policy.