Quick Search

Quick Search Matching Styles

Summary

  • AdapTable allows users to configure the highlighting style of matching cells of Quick Search
  • This can be done both at design-time and run-time

When Quick Search runs, AdapTable provides 3 different Styles to highlight matching cells and search text.

Note

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

Quick Search Style colours are defined using the swatch set of CSS variables (--ab-color-swatch-*)

Find Out More

See Customising an AdapTable Theme and Providing a Custom Colour Palette for more information

Property NameHighlightsDefault
CellMatchStyleAll Text in Matching CellsSwatch 10 — cell
TextMatchStyleMatching text within CellSwatch 9 — match
CurrentTextMatchStyleMatching text in current Cell (when cycling results)Swatch 20 + 1 — match

Caution

  • CellMatchStyle is optional until Cell Match is set in the UI
  • In the Server-Side Row Model, only the CellMatchStyle is available (whole-cell highlight)

Design Time

Developers can provide an alternative Style for all 3 properties in Quick Search Initial State.

Developer Guide

Setting Matching Styles via Initial Adaptable State

All 3 Styles are of type Adaptable Style used in many places in AdapTable, allowing developers to provide:

  • Fore, Back and Border Colours - each by name, hex or rgb(a)
  • Font Properties (e.g. Bold, Italic etc)
const initialState: InitialState = {
  QuickSearch: {
    CellMatchStyle: {
      ForeColor: 'rgba(0,0,255,0.1)', //rgba value (rgb also possible)
      BackColor: 'green', //Name value
    },
    TextMatchStyle: {
      ForeColor: 'Blue',
      FontStyle: 'Italic',
    },
    CurrentTextMatchStyle: {
      BackColor: 'Pink',
      FontWeight: 'Bold',
    },
  },
};
1
Set a Quick Search Cell Matching Style

Provide a Style for the whole text in Matching Cells.

2
Set a Quick Search Text Matching Style

Provide a Style for just the matching text in Matching Cells.

3
Set a Quick Search Current Text Matching Style

Provide a Style the matching text in the Current Matching Cell.

This is used when cycling through the result set.

Quick Search Matching Styles
Fork
  • In this demo we have set all 3 Quick Search Matching Styles
    • CellMatchStyle - BackColor: 'Brown' and ForeColor: 'Yellow'
    • TextMatchStyle - BackColor: 'Purple', ForeColor: 'White' and Italics
    • CurrentTextMatchStyle - Bold and large text
Try It Out
  • Run different searches and see the style applied
  • Cycle through the result set to see the CurrentTextMatchStyle be applied

Run Time

Run-time users can configure Quick Search matching styles in the Quick Search section of the Settings Panel.

  • Client-side row models — three tabs: Text MatchCurrent Match, andCell Match`
  • Server-side row model — Cell Matching Style only (whole-cell highlight).

The UI allows users to select colours from the theme palette and font properties.

UI Step by Step Guide

Setting Quick Search Matching Styles in the Settings Panel

Note

Defaults are resolved at run time and are not written to Adaptable State until you customise them (via Initial State, Settings Panel, or API). By default, only matching text is highlighted; set Cell Match to add a whole-cell background.

AdapTable Resources

PreviousQuick SearchNextQuick Search as Filter