This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Search

# 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.


// 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:
// Set query method programmatically:
// Set search result cells class programmatically:

# Options

# search

Source code (opens new window) : boolean

Setting to true enables the Search plugin (see demo).

Default: false Example

// enable search plugin
search: true,

// or
// as an object with detailed configuration
search: {
  searchResultClass: 'customClass',
  queryMethod: function(queryStr, value) {
  callback: function(instance, row, column, value, result) {

# Methods

# destroy

Source code (opens new window)


Destroys the plugin instance.

# disablePlugin

Source code (opens new window)


Disables the plugin functionality for this Handsontable instance.

# enablePlugin

Source code (opens new window)


Enables the plugin functionality for this Handsontable instance.

# getCallback

Source code (opens new window)

search.getCallback() ⇒ function

Gets the callback function.

Returns: function - Return the callback function.

# getQueryMethod

Source code (opens new window)

search.getQueryMethod() ⇒ function

Gets the query method function.

Returns: function - Return the query method.

# getSearchResultClass

Source code (opens new window)

search.getSearchResultClass() ⇒ string

Gets search result cells class name.

Returns: string - Return the cell class name.

# isEnabled

Source code (opens new window)

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 than the AutoRowSize#enablePlugin method is called.

# query

Source code (opens new window)

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 (opens new window)


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 (opens new window)


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 (opens new window)


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 (opens new window)


Updates the plugin state. This method is executed when Core#updateSettings is invoked.

Last Updated: Apr 12, 2024