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
| Property Name | Highlights | Default |
|---|---|---|
CellMatchStyle | All Text in Matching Cells | none |
TextMatchStyle | Matching text within Cell | AG Grid Default (Black Text - Bright Yellow Background) |
CurrentTextMatchStyle | Matching text in current Cell (used when cycling through results) | AG Grid Default (Black Text - Orange Background) |
Caution
If using the Server-Side Row Model, only the first of these Styles is available (with default colours)
Design Time
Developers can provide an alternative Style for all 3 properties in Quick Search Initial State.
Note
Additionally, run-time users are able to set the CellMatchStyle (but not, currently, the other two Styles)
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',
},
},
};Provide a Style for the whole text in Matching Cells.
Provide a Style for just the matching text in Matching Cells.
Provide a Style the matching text in the Current Matching Cell.
This is used when cycling through the result set.
- In this demo we have set all 3 Quick Search Matching Styles
CellMatchStyle- BackColor: 'Brown' and ForeColor: 'Yellow'TextMatchStyle- BackColor: 'Purple', ForeColor: 'White' and ItalicsCurrentTextMatchStyle- Bold and large text
- Run different searches and see the style applied
- Cycle through the result set to see the
CurrentTextMatchStylebe applied
Run Time
Run-time users can set an alternative Cell Matching Style in the Quick Search section of the Settings Panel.
The UI allows users to select their own custom colours and font properties.
UI Step by Step Guide
Setting a Quick Search Cell Matching Style in the Settings Panel
FAQ
Can we set all 3 Styles at design-time?
No, at present only the CellMatchStyle property can be set in the UI.
This will be extended in the near future to allow all 3 styles to be set.