External search box with highlighted matches
Live in demo 69-highlighted-search.
Open the live example: Highlighted search matches (Filtering & Search)
When
A search input outside the grid filters the visible rows AND highlights matched substrings inline.
How
Key API surface:
derived visibleRowscustom cell snippet wraps matches in <mark>
See the demo source for the full implementation; this recipe pins the pattern + the surface so you can copy-paste it confidently. The doc page that explains the underlying feature in depth is linked from the recipes index.
See also
- Demo 69-highlighted-search source
- Demo 69-highlighted-search prompt sidecar - drop into an LLM context window
- Recipes index
Related articles
- Excel-Style Filtering for Your Svelte Data Grid - Per-column filter menus, a filter row, global search, and server-side filtering - all wired through a single columnFilteringFeature in SvGrid.
- Set Filters and Custom Filter Logic in SvGrid - Build Excel-style checkbox set filters with live facet counts and a custom numeric range filter - using four API calls and plain Svelte markup.