Quick Search

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.

important

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.

tip

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 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 runQueryAfterQuickSearch property in 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.

caution

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

searchOptions = {
runQueryAfterQuickSearch: 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.

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.

    tip

    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.

caution

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

tip

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

Quick Search State

Quick Search Predefined Config is composed as follows:

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

Style Object

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

PropertyDescription
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

Quick Search API contains a number of quick search related functions:

MethodDescription
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

FAQ

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