AdapTable Quick Search

Summary

  • AdapTable allows users to search AG Grid quickly to find all cells which match the search text
  • It will highlight all matching cells - using the Style specified
  • There is an option to run filter Search results so only matching rows are displayed in the Grid
  • A search bar can be added to the Dashboard and Status Bar to enable quick searching

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

This is a wrapper around AG Grid's "Find" functionality, providing a UI for run-time users to perform searches.

When running Quick Search, AdapTable will find, and highlight, all instances of a requested search value in:

  • All AG Grid data / field Columns
  • Dynamic Columns (e.g. Row Grouped or Tree View Columns)
  • AdapTable Special Columns (e.g. Calculated and FreeText Columns)
  • Leaf (i.e. data) rows
  • Grouped rows (ie. which contain aggregations)

Hint

As well as Quick Search, AdapTable offers Grid Filter and Column Filter Modules, which only display matching Grid Rows

Unlike Grid Filter or Column Filters, Quick Search is purely text-based, running on cell's display value.

For example, a cell with a display value of '£1,500' will not be returned in a search for '1500' (but '£1' will pass).

Caution

Cells using an AG Grid Cell Component will be searched using the raw value (as the cell could be displaying an image)

Quick Search supports the functionality in AG Grid's Find that allows users to cycle through matching results, together with the ability to provide bespoke styles for matching cells (see below).

Quick Search
Fork
  • This demo runs a Quick Search on the word 'Javascript'

Note

  • Quick Search is a constant operation and re-runs when a new Quick Search is applied
  • It also re-evaluates whenever data is edited in the Grid, or column visibility changes

Quick Search Inputs

Searching is one of the most commonly performed actions in AdapTable.

For this reason AdapTable makes it easy for run-time users to search text in the UI by providing multiple Quick Search inputs across all the different AdapTable UI components (each wrapping AG Grid Find):

Hint

  • All of these inputs have a default placeholder text of 'Search'
  • Use the quickSearchPlaceholder property in Quick Search Options to set a different placeholder value

  • the Dashboard Header has an embedded Quick Search text box (available in Expanded, Collapsed and Floating Modes)

    Hint

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

  • Quick Search can be run (and the Matching Style set) in the Quick Search section of the Settings Panel

  • A Quick Search Toolbar is available in the Dashboard

    Note

    This Toolbar is rarely used in practice since the Dashboard contains a dedicated Quick Search input

  • A Quick Search Tool Panel allows users to run Quick Search from the AdapTable ToolPanel Component

  • A Quick Search Status Bar Panel can be included in the AdapTable Status Bar

Matching Cells Styles

When Quick Search runs, matching cells are styled and highlighted in order to make them visually distinct.

There are 3 different styles that can be set (all of which match to an AG Grid style) in Quick Search State:

Note

All use the common Adaptable Style object which includes multiple font properties and fore, back and border colours

  • CellMatchStyle - styles all text in Matching Cells
  • TextMatchStyle - styles matching text withing Matching Cell
  • CurrentTextMatchStyle - styles matching text in current Cell (used when cycling through results)

Find Out More

See Quick Search Matching Styles for details of how to override the default styles

Configuring Search

Developers are able configure some aspects of Quick Search behaviour, including:

  • Providing a bespoke Quick Search implementation
  • Exclude some Columns from Quick Search
  • Choose whether or not to save Quick Search results between sessions
  • Supply a different placeholder for Quick Search inputs

Find Out More

See Configuring Quick Search for more details of the configuration options available

Filter Search Results

By default Quick Search will not also filter AG Grid to display only rows that contain matching search text.

However this can be configured by setting Quick Search to run as Filter.

Floating Quick Search

Quick Search can be set up to display in a "floating" mode on top of the Grid.

Hint

This is especially useful if screen real estate is at a premium and the Dashboard and other UI components are hidden

Server-Side Row Model

Quick Search works when using the Server-Side Row Model.

However instead of leveraging AG Grid's Find (as with the Client-Side Row Model), AdapTable provides a bespoke implementation.

Note

This is because AG Grid's Find is not available in the Server-Side Row Model

Setting UI Entitlements

UI Entitlements behaviour for Quick Search is as follows:

  • Full - Quick Search runs and appears normally

  • Hidden and ReadOnly - Quick Search Settings Panel, Toolbar, Tool Panel and Status Bar are not available

    Caution

    • The Quick Search input still displays in the Dashboard Header with Entitlement settings of ReadOnly
    • Set showQuickSearchInHeader property in Dashboard Options to false to hide this input from the Dashboard

FAQ

Does Quick Search update in real time as the data changes? Yes it does. Like Grid Filter and Column Filters, Quick Search is reapplied as data changes

Does Quick Search run on Grouped Rows? Yes, this was made available in Version 21.2 of AdapTable

Is it possible to do free style quick search (e.g. '> 50')? No; previous versions of AdapTable offered 'wildcards' but Column Filters now provide that functionality instead

NextStyling Quick Search