/ S

React Data Grid Searching values

Search data across Handsontable, using the built-in API methods of the Search plugin, and implementing your own search UI.

In this article

Overview

TIP

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference to the HotTable component, and reading its hotInstance property.

For more information, see the Instance methods page.

The Search plugin provides an easy API to search data across Handsontable.

You should first enable the plugin by setting the search option to true. When enabled, the Search plugin exposes a new method query(queryStr), where queryStr is a string to find within the table. By default, the search is case insensitive.

query(queryStr, [callback], [queryMethod]) method does 2 things. First of all, it returns an array of search results. Every element is an objects containing 3 properties:

  • row – index of the row where the value has been found
  • col – index of the column where the value has been found
  • data – the value that has been found

The second thing the query() method does is set the isSearchResult property for each cell. If a cell is in search results, then its isSearchResult is set to true, otherwise the property is set to false.

All you have to do now, is use the query() method inside search input listener and you're done.

Search result class

By default, the Search plugin adds htSearchResult class to every cell which isSearchResult property is true. You can change this class using searchResultClass configuration option.

To change the result class, you use the var searchPlugin = hot.getPlugin('search'); searchPlugin.setSearchResultClass(className); method.

Custom queryMethod

The queryMethod() function is responsible for determining whether a queryStr matches the value stored in a cell. It takes 2 arguments: queryStr and cellData. The first is a string passed to query() method. The second is a value returned by getDataAtCell(). The queryMethod() function should return true if there is a match.

The default queryMethod function is dead simple:

const DEFAULT_QUERY_METHOD = function(query, value) {
  if (isUndefined(query) || query === null || !query.toLowerCase || query.length === 0) {
    return false;
  }
  if (isUndefined(value) || value === null) {
    return false;
  }

  return value.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
};

If you want to change the queryMethod, use the queryMethod option. You can also pass the queryMethod as the third argument of query() method. To change the queryMethod, use var searchPlugin = hot.getPlugin('search'); searchPlugin.setQueryMethod(myNewQueryMethod);.

Custom result callback

After calling queryMethod the Search plugin calls callback(instance, rowIndex, colIndex, cellData, testResult) for every cell.

Just as the queryMethod, you can override this callback, using var searchPlugin = hot.getPlugin('search'); searchPlugin.setCallback(myNewCallbackFunction);, or passing your callback as the second argument of query() method.

The default callback is responsible for setting the isSearchResult property.

const DEFAULT_CALLBACK = function(instance, row, col, data, testResult) {
  instance.getCellMeta(row, col).isSearchResult = testResult;
};

Simplest use case

The example below:

  • Enables the Search plugin (by setting the search configuration option to true)
  • Adds a search input listener
  • Inside the search input listener, gets the Search plugin's instance
  • Uses the Search plugin's query() method

    Custom search result class

    You can style your search results with a custom CSS class, using the Search plugin's searchResultClass option.

    The example below highlights its search results in bold red. To do this, it:

    • Defines a custom CSS class called my-custom-search-result-class
    • Enables the Search plugin (by setting the search configuration option to an object)
    • Sets the Search plugin's searchResultClass option to 'my-custom-search-result-class'

      Custom query method

      You can add a custom query method, using the Search plugin's queryMethod.

      The example below searches only for exact search query matches. To do this, it:

      • Defines a custom query method called onlyExactMatch
      • Enables the Search plugin (by setting the search configuration option to an object)
      • Sets the Search plugin's queryMethod option to onlyExactMatch

        Custom callback

        You can add a custom callback function, using the Search plugin's callback option.

        The example below displays the number of matching search results. To do this, it:

        • Defines a custom callback function called searchResultCounter
        • Enables the Search plugin (by setting the search configuration option to an object)
        • Sets the Search plugin's callback option to searchResultCounter

          ← Accessibility →