Quick Search

The Quick Search function 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).

Filtering

Quick Search does not filter the Grid - it merely hightlights matching text in the current visible rows and columns.

note

Previous versions of AdapTable did enable filtering as a Quick Search option, but with the improved functionality around Queries and Column Filters of Version 7, this was no longer required.

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

Since Version 7 of AdapTable, 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 Expression 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

By default the Quick Search textbox displays the word 'Search' as a 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 function, a Quick Search text box is embedded in the Dashboard Header itself - in Expanded, Collapsed and Floating Modes.

    tip

    Set ShowQuickSearchInHeader property in Dashboard Predefined Config to false to hide this input.

Entitlements

Quick Search Entitlement Rules:

  • Full: Everything is available to the User

  • Hidden: Everything is hidden from the User and Quick Search is removed completely from AdapTable

  • ReadOnly: N/A

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 the standard AdaptableStyle Object

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
applyQuickSearch(quickSearchText)Runs Quick Search using supplied text
clearQuickSearch()Clears Quick Search
getQuickSearchState()Retrieves Quick Search section from Adaptable State
getQuickSearchStyle()Retrieves current Quick Search style
getQuickSearchValue()Retrieves current Quick Search 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