Quick Search Module

The Quick Search Module performs a text search in AdapTable.

It highlights all instances of a specific value across all visible columns in the Grid.


Quick Search is a 'constant operation' - so, like with Column Filters, it will run both when a new Quick Search is applied but also when data ticks or the visible columns change.

Setting Highlight Style

The Quick Search UI allows users to set the Style (e.g. font properties and fore and back colours) of each matched cell, using the Adaptable Style object.


An alternative to setting the properties individually, is to set a css style classname for Quick Search (make sure to include the css style being referenced in your code).

Excluding Quick Search Columns

By default every visible column in the Grid will be included in Quick Search and highlight any matching cells.

The excludeColumnFromQuickSearch property in [Search Options]#search-options) receives a function which can be used to exclude particular columns from Quick Search.

searchOptions = {
// Exclude the 'country' column and any Read Only columns
excludeColumnFromQuickSearch: (column: AdaptableColumn) => {
if (column.ColumnId === 'country' || column.ReadOnly) {
return true;
return false;

Running Quick Search as a Query

By default, Quick Search runs as a highlight-only function and does not also filter the grid.

However this behaviour can be achieved by setting the filterResultsAfterQuickSearch property in [Search Options]#search-options) to true (or by selecting the checkbox in the Quick Search Popup).

This will run a Query using the ANY_CONTAINS Query function and the Quick Search text.


If this option is set then any existing Queries will be overriden when Quick Search is run

searchOptions = {
filterResultsAfterQuickSearch: true,

Setting Quick Search Placeholder

The Quick Search textbox displays the word 'Search' as it's placeholder.

This can be changed by setting the quickSearchPlaceholder property in [Search Options]#search-options).

searchOptions = {
quickSearchPlaceholder: 'Find',

UI Elements

Quick Search includes the following UI Elements:

  • Popup - Allows a Quick Search operation to be performed, and for the highlight style to be set.

  • Toolbar - Enables Quick Search to be performed

  • Tool Panel - Same as Toolbar above.

  • Dashboard - Because Quick Search is such a popular Module, a Quick Search text box is embedded in the Dashboard Header itself - in Expanded, Collapsed and Floating Modes.


    Set ShowQuickSearchInHeader property in Dashboard Options to false to hide this input

UI Entitlements

UI Entitlements behaviour is as expected for Full and Hidden Access Levels.

The ReadOnly Entitlement behaviour is the same as if the Access Level was Hidden.


Quick Search will still appear in the Dashboard Header even with an Entitlement setting of Hidden


Set ShowQuickSearchInHeader property in Dashboard Options to false to hide this input

Quick Search Options

Quick Search

There are a few options of interest regarding running Quick Search:

Run Query

By default Quick Search provides Find (rather than a Filter) functionality.

This means that it will display the results of the Search but not filter the grid only to display matching rows.

This can be changed by setting filterResultsAfterQuickSearch to true, which will tell AdapTable to run a Query using the Quick Search text.


This will have the effect of replacing the current Query (if one has been run)

searchOptions = {
filterResultsAfterQuickSearch: true

Excluding Quick Search

The excludeColumnFromQuickSearch property is a function to be provided by developers at Design-time that will exclude particular columns from Quick Search results:


This is particularly useful in cases where a cell renderer causes false positives in the Search results

searchOptions = {
// Exclude the 'country' column and any Read Only columns
excludeColumnFromQuickSearch: (column: AdaptableColumn) => {
if (column.ColumnId === 'country' || column.ReadOnly) {
return true;
return false;


The Quick Search textbox - both in the Toolbar and ToolPanel - displays 'Search' as the placeholder.

Different text can be displayed by configuring the quickSearchPlaceholder property:

searchOptions = {
quickSearchPlaceholder: 'Find'

Quick Search State

Quick Search Predefined Config includes the Text for search for and the Style to display in matching cells:

QuickSearchTextQuick Search to run at start up (rarely set at design time)
StyleStyle to use for Quick Search; uses standard AdaptableStyle Object

Adaptable Style

The Style property is an Adaptable Style object defined as follows:

BackColorColour background of cell - provide a hex value.
BorderColorColour of cell border - provide a hex value.
ClassNameName of existing Css Class; use instead of setting other object properties
FontSizeSize of font: 'XSmall', 'Small', 'Medium', 'Large' or 'XLarge'
FontStyleStyle of the font: 'Normal' or 'Italic'
FontWeightWhether font appears as 'Normal' or 'Bold'
ForeColorFont colour in cell - provide a hex value.

Quick Search Config Example

export default {
QuickSearch: {
QuickSearchText: 'jan',
Style: {
BackColor: '#ffff00',
ForeColor: '#8b0000',
} as PredefinedConfig;

In this example we have set up Quick Search to run a search at startup for all cells whose contents include 'jan'.

Matching cells will be highlighted with the back and fore colors specified in the Style.

Quick Search API

This contains a number of quick search related functions:

clearQuickSearch()Clears Quick Search
getQuickSearchState()Retrieves Quick Search section from Adaptable State
getQuickSearchStyle()Retrieves current Quick Search style
getQuickSearchValue()Retrieves current Quick Search text
runQuickSearch(quickSearchText)Runs Quick Search using supplied text
setQuickSearchStyle(style)Sets style for Quick Search; can be name of (a provided) css style
showQuickSearchPopup()Opens Quick Search popup screen


Is it possible to do free style quick search (e.g. '> 50')

No, this was possible in previous versions but as column filters now provide that functionality, it was removed from Quick Search which is a simple text search on 'contains'

Can we limit Quick Search to particular columns or column data types?

Yes, you can. By default Quick Search works across ALL columns in AdapTable.

However if you want to exclude a column then provide an implementation for the excludeColumnFromQuickSearch function in the [Search Options]#search-options) section of AdaptableOptions.

Does Quick Search include hidden columns?

No, Quick Search only operates on visible columns and it gets re-applied if the column visibility changes.

If you have a large number of columns in your grid so that some are not visible in the current viewport (i.e. horizontal scrolling position), Quick Search will still operate on them.

Does Quick Search update in real time as the data changes

Yes it does. Like Query and Filter, Quick Search is reapplied as data changes.

More Information