Search blocks by description or jump to a page.
An environment variables table with a filter input that narrows rows live and marks the matched substring inside each key, above a live count line.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Search Highlight Table is the environment variables list for the Production project, eight keys with their value, environment badges, and a last updated date. A filter input in the header narrows the rows as you type, and the matched substring is wrapped in a mark inside each mono key so the reason a row survived the filter is visible. The count line reads how many of the total keys are shown, and secret values render as dots rather than plain text.
Filtering is a single useState query; the rows are the source array filtered by a case-insensitive key match, and the highlight helper splits each key around every match so the mark can be applied per occurrence. When nothing qualifies, a no match row replaces the body with a short recovery line. The footnote notes secret values are write only in this view and read through the CLI.
Reach for this block on any long key value list where the fastest path to a row is typing part of its name: environment variables, config keys, or a settings reference. Wire the query to your filter state and keep the highlight so a reader can confirm the match at a glance.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the environment variables reference. Other find as you type tables:
Tip: highlight the match inside the row, not just filter to it; the mark tells a reader why a row qualified and where the term sits in a long key.