Searching in React Data Grid

The Syncfusion® React Data Grid includes a built-in search feature that efficiently filters records based on a specified search value. It helps quickly locate and display relevant data from the grid’s data source. To enable this feature, set the searchSettings.enabled property to true.

The Data Grid component adds a search box to the grid’s toolbar, enabling quick filtering of records based on text entered in the search box. To enable this feature, add the Search item to the toolbar property.

Programmatic search

The Data Grid component supports programmatic search using the search method instead of the built-in search box.

To perform a search, call search('text') with the desired string. Matching records across all searchable columns will be displayed.
To clear the search, call search('') with an empty string. This resets the view and shows all records.

By default, the search applies to all visible and invisible columns.

Initializing Data Grid with predefined search value

To render the grid with a predefined search value, set the desired search value in the searchSettings property during grid initialization. This ensures that only records matching the specified search value are displayed when the grid loads.

Configure the relevant searchSettings properties to apply the predefined search during grid initialization.

Property	Description
`fields`	Specifies the fields in which the search operation needs to be performed.
`operator`	Specifies the operator to be used for the search operation.
`value`	Specifies the value to be searched.
`ignoreCase`	Specifies whether the search operation should be case-sensitive or case-insensitive. This setting is optional.
`ignoreAccent`	When enabled, ignores diacritic characters or accents in text during the search operation. This setting is optional.

Search operators

The searchSettings.operator property defines how search values are compared. By default, it uses the contains operator, which returns records that include the specified search term. The following operators are supported in searching:

Operator	Description
`startswith`	Checks whether a value begins with the specified value.
`endswith`	Checks whether a value ends with the specified value.
`contains`	Checks whether a value contains with the specified value.
`wildcard`	Uses the `` symbol to define the wildcard search patterns. For example, `te` matches values like "test" and "team".
`like`	Uses the `%` symbol to define the LIKE search patterns. For example, `%box` matches values ending with "box".
`equal`	Checks whether a value equal to the specified value.

Search specific columns

By default, the Data Grid component searches across all visible columns. To improve performance especially in wide grids limit the search to specific columns by defining their field names in the searchSettings.fields property. This approach ensures that only the designated columns (e.g., "BookID", "Title", "Author", "Genre") are included in the search operation, ignoring all other columns regardless of visibility.

The following example demonstrates restricting the search functionality to the "BookID", "Title", "Author", and "Genre" columns using the searchSettings.fields property.

Ignore accent while searching

Enabling the searchSettings.ignoreAccent property to true makes the search treat accented and non-accented characters as equal (for example, matching "Oxford Stréét" with "Oxford Street"). This improves search accuracy in datasets containing special characters in multiple languages.

Retrieve searched records by external button

To get the searched records, use the grid’s getData() method. This method returns results based on active queries applied to the grid. When paging is enabled, getData() returns only the records on the current page. To retrieve all searched records without pagination limits, call getData(false).

Events

The Data Grid component provides event hooks that trigger when a search action is completed.

Event	Description
`onSearch`	Fires after a searching operation completed on the grid. Provides search result details for post-search actions such as updating UI elements, logging, or triggering dependent logic.