Quick Search

Summary

Quick Search is a text search that finds any cells which match the search text
This includes cells in Row Groups and Calculated Columns
AdapTable provides a style for the matching text (and matching Cell) both of which the user can override
Users can cycle through each matching Search result (and change the style for the Active Cell)

AdapTable provides cross-grid text search functionality called 'Quick Search'.

AdapTable will look for all instances of a requested search value across all columns in AG Grid.

Note

In addition to Quick Search, AdapTable offers Querying and Filtering functionality
Both of these will only display matching rows in the Grid

AdapTable highlights any matching cells using the Quick Search Highlight Styles.

Styles can be set for the whole of the cell which contains the search term and / or just the text that matches.

Additionally, AdapTable will allow users to cycle through all the results with up and down keys (and provide a style for the "active" result).

Note

Quick Search is a constant operation
It runs when a new Quick Search is applied, or if data is edited in the Grid, or column visibility changes

Using Quick Search

Fork Fork

This example is running a Quick Search on the text "java" using the default props
We can see Quick Search Results in the Language and Description columns

TRYITOUT: Use the up and down buttons in the Quick Search input to cycle through the Quick Search Results and see the Active Cell Style

Open Sandbox

Highlight Styles

By default, as seen in the demo above, AdapTable will render any matching text with a yellow background.

But this can be modified by 2 Style properties in Quick Search Props:

highlightTextStyle sets the Style for the matching Text (the default is yellow background)
highlightCellStyle sets the Style for the containing Cell (the default is null)

Hint

Setting a Highlight Cell Style is useful when cells contain lots of text, e.g. the Description column in the demo below
Note how the 1st, 3rd and 5th cells in the column all match even though we cannot see the matching text

Quick Search Highlight Styles

Fork Fork

In this example we have provided 2 Highlight Styles

A Style for matching Cells of a brown border
A Style for matching Text of white text on orange background

Note: In this demo, we have put the Quick Search widget at the bottom of the grid.

Open Sandbox

Navigating Results

Users are able to "cycle" through the Quick Search results using the up and down arrows in the Quick Search control.

Note

If this behaviour is not required it can be removed by setting disableNavigation to true in Quick Search props

When the user clicks one of the arrows in the Quick Search Control, AdapTable will:

highlight the next (or previous) cell in the Result
jump to the Cell if it was previously out of focus
update the control to describe the cell's position in the result (e.g. 3 / 10 )

Active Cell Styles

By default, when navigating through Quick Search results, AdapTable styles the current Active Cell with a light yellow background.

But similar to Highlight Styles, this can be modified using 2 Style properties in Quick Search Props:

activeTextStyle sets the Style for the Active Cell Text (the default is null)
activeCellStyle sets the Style for the Active Cell (the default is yellow background)

Quick Search Active Cell Styles

Fork Fork

In this example we have provided 2 Active Cell Styles

A Style for the currenct Active Cell of a blue background
A Style for the Text in the Active Cell of white text on purple background

TRYITOUT: Use the up and down buttons in the Quick Search input to cycle through the Quick Search Results and see the Active Cell Style

Open Sandbox

Row Groups

Quick Search can work on all cells in Infinite Table - inclued cells in Row Groups and when pivoting.

Quick Search in Row Groups

Fork Fork

In this example we have a View with a Row Grouping on Language column, and we search on '74' which returns matching cells in:

Grid Cells
the Grouped Row - for the Stars 'sum' aggregation
the All PRs Calculated Column

Open Sandbox

Quick Search State

The properties in the quickSearch section of Adaptable State are:

Property	Description	Default
activeCellStyle	Cell Style for currently Active Cell (available when `disableNavigation` is false)
activeTextStyle	Text Style for currently Active Cell (available when `disableNavigation` is false)
disableNavigation	Prevent navigation through search results using arrow keys	false
highlightCellStyle	Cell Style for matching Cells
highlightTextStyle	Text Style for matching Cells
quickSearchDebounceTime	Debounce timeout for Quick Search input	250
searchPlaceholder	Placeholder text for Quick Search input	'Search'
searchText	Text used to run Quick Search

FAQ

Does Quick Search update in real time as the data changes? Yes it does.

Does Quick Search run on Grouped Rows? Yes it does

Does Quick Search work in Pivot Views? Not at the moment, but we hope to add this in a future release.

PreviousOverview NextColumn Filters