Search across columns
Find matching rows across several columns with one input.
Options
Changes below update the Grid and code immediately.
This example starts with Platform in the search box. Inspect orders assigned to Platform.
View code
Sample data included in the code · 6 rows
Usage guide
#Use quick search to find orders by product or team before identifying which column contains the value.
Try it yourself
- Inspect the initial search
This example starts with Platform in the search box. Inspect orders assigned to Platform.
- Search for another value
Change the term to Beacon to find Beacon Lite products. Search is not restricted to one column.
- Return to the full list
Clear the search text. All orders reappear if no other filters are active.
Typing retains matching rows and displays quickFilterText in the results.
Search covers data currently held by the Grid. Connect search conditions to server queries to include orders not yet downloaded.
Useful terms
- quickFilterText
- A search term applied across columns.
- Column filters
- A separate search method applying conditions to a specific column.
Key API examples
Application code that references the registered Grid element as grid.
grid.quickFilterText = 'Platform';
grid.quickFilterMode = 'and';API reference
#Key properties
| Attribute / Property | Type / Default | Description |
|---|---|---|
| quickFilter | booleanDefault: false | Mount the global quick filter toolbar above the grid header. |
Other properties5
| Attribute / Property | Type / Default | Description |
|---|---|---|
| quickFilterText | stringDefault: '' | Initial quick filter value; later prop changes mirror into state. |
| quickFilterPlaceholder | stringDefault: undefined | Placeholder text for the quick filter input. |
| quickFilterMode | 'and' | 'or'Default: 'and' | Quick filter word mode. |
| quickFilterRegex | booleanDefault: false | when true, the quick-filter text is a regular expression tested against each cell (a row matches when any cell matches). An invalid / half-typed pattern falls back to showing all rows. |
| quickFilterDebounce | numberDefault: 150 | Debounce before quick filter re-runs the pipeline. |
Events1
| Events | Detail type | Description |
|---|---|---|
GridQuickFilterChangedDetail | Fires when the quick filter commits a new search value. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.