JavaScript Data GridSearch

On this page

• Description
• Options
  • search
• Methods
  • destroy
  • disablePlugin
  • enablePlugin
  • getCallback
  • getQueryMethod
  • getSearchResultClass
  • isEnabled
  • query
  • setCallback
  • setQueryMethod
  • setSearchResultClass
  • updatePlugin

Description

The search plugin provides an easy interface to search data across Handsontable.

In order to enable search mechanism, Options#search option must be set to true.

Example

// as boolean
search: true
// as a object with one or more options
search: {
  callback: myNewCallbackFunction,
  queryMethod: myNewQueryMethod,
  searchResultClass: 'customClass'
}

// Access to search plugin instance:
const searchPlugin = hot.getPlugin('search');

// Set callback programmatically:
searchPlugin.setCallback(myNewCallbackFunction);
// Set query method programmatically:
searchPlugin.setQueryMethod(myNewQueryMethod);
// Set search result cells class programmatically:
searchPlugin.setSearchResultClass(customClass);

Options

search

Source code

search.search : boolean | object

The search option configures the Search plugin.

You can set the search option to one of the following:

Setting	Description
false (default)	Disable the Search plugin
true	Enable the Search plugin with the default configuration
An object	- Enable the Search plugin - Apply your custom configuration

If you set the search option to an object, you can configure the following search options:

Option	Possible settings	Description
searchResultClass	A string	Add a custom CSS class name to search results
queryMethod	A function	Add a custom query method
callback	A function	Add a custom callback function

Read more:

• Searching values
• Searching values: Custom query method
• Searching values: Custom callback

Default: false
Example

// enable the `Search` plugin with the default configuration
search: true,

// enable the `Search` plugin with a custom configuration
search: {
  // add a `customClass` CSS class name to search results
  searchResultClass: 'customClass',
  // add a custom query method
  queryMethod(queryStr, value) {
    ...
  },
  // add a custom callback function
  callback(instance, row, column, value, result) {
    ...
  }
}

Methods

destroy

Source code

search.destroy()

Destroys the plugin instance.

disablePlugin

Source code

search.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

search.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

getCallback

Source code

search.getCallback() ⇒ function

Gets the callback function.

Returns: function - Return the callback function.

getQueryMethod

Source code

search.getQueryMethod() ⇒ function

Gets the query method function.

Returns: function - Return the query method.

getSearchResultClass

Source code

search.getSearchResultClass() ⇒ string

Gets search result cells class name.

Returns: string - Return the cell class name.

isEnabled

Source code

search.isEnabled() ⇒ boolean

Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit hook and if it returns true then the AutoRowSize#enablePlugin method is called.

query

Source code

search.query(queryStr, [callback], [queryMethod]) ⇒ Array<object>

Makes the query.

Param	Type	Description
queryStr	string	Value to be search.
[callback]	function	optional Callback function performed on cells with values which matches to the searched query.
[queryMethod]	function	optional Query function responsible for determining whether a query matches the value stored in a cell.

Returns: Array<object> - Return an array of objects with row, col, data properties or empty array.

setCallback

Source code

search.setCallback(newCallback)

Sets the callback function. This function will be called during querying for each cell.

Param	Type	Description
newCallback	function	A callback function.

setQueryMethod

Source code

search.setQueryMethod(newQueryMethod)

Sets the query method function. The function is responsible for determining whether a query matches the value stored in a cell.

Param	Type	Description
newQueryMethod	function	A function with specific match logic.

setSearchResultClass

Source code

search.setSearchResultClass(newElementClass)

Sets search result cells class name. This class name will be added to each cell that belongs to the searched query.

Param	Type	Description
newElementClass	string	CSS class name.

updatePlugin

Source code

search.updatePlugin()

Updates the plugin's state.

This method is executed when updateSettings() is invoked with any of the following configuration options:

• search