shadcn.io is not affiliated with official shadcn/ui
Row Highlight Threshold Table Block for React
A courier route board with a slider that sets how many minutes late a route must be to be flagged, marking matching rows with a tint, a bar and the word Late while the rows stay in place.
Installation
Overview
Make a rule visible on the rows it matches, with this threshold highlight table for React with Base UI. A compact header names the board, and above the table a Slider reads "Flag routes late by", from 0 to 30 minutes, with its value written beside it. Nine courier routes sit in a native table with the driver, the stops remaining, the delay in minutes and the estimated arrival. A route at or over the threshold is flagged three ways at once: a solid 8% tint of the text colour across the row, a bar at the row's start and the word "Late" in an outline Badge beside its delay. A polite line counts "5 of 9 routes flagged" as the slider moves, and a legend says what the marks mean. The rows never move or change height, because the word "Late" has its place reserved in every row. On a phone the driver folds under the route name. It's built from Slider, Badge, Guides and a native table, with a CSS entrance only. For delivery boards, service desks, queues and any list where a threshold decides what needs attention.
FAQ
How do I use my own rows and measure?
Edit ROUTES, where delay is the number the slider is compared with. flaggedOf is one line, route.delay >= threshold, and is the only place the rule lives: change it to a ratio, a score or a date and every mark, the count and the status line follow. Change MAX for the slider's range and START for where it opens.
Why isn't the highlight a colour?
Because state shouldn't depend on colour. A flagged row has a solid tint of the text colour, a bar at its start and the word "Late", and the same row reads correctly in greyscale, in dark mode, in a high-contrast theme and to a screen reader. The tint is a solid mix rather than a transparent layer, so text on it keeps its contrast, and flagged rows use full-strength text.
What stays local, and how do I wire it to real data?
The routes and the threshold live in the page; nothing is saved or requested. In your own app, keep the threshold in state or a query parameter, pass the rows from your API, and leave flaggedOf and the marks as they are. If the rule should run on the server, send the threshold and flag the rows there, then render the flag.
Is a slider that changes a table accessible?
Yes. The slider has a visible label and a spoken value ("10 min"), moves with the arrow keys, Home, End and Page keys, and the polite status line reads out how many routes are now flagged without moving focus. The flagged state is in the markup, not only the paint: "Late" is real text in the row and the table's caption says that routes at the threshold are marked. Rows are a native table with a caption and scope on every head.
How does it look on a phone?
The Driver column folds into a second line under the route, the slider takes the full width above the table and the delay and its "Late" word stack in a column of fixed height, so a flagged row is no taller than an unflagged one. Nothing scrolls sideways.
Do rows jump when I drag the slider?
No. The set of rows never changes, each row has a fixed height and the Late badge keeps its place whether it shows or not, so only the tint, the bar and the word change as you drag. Because the rows are the same nine in the same order, a reader can follow one route as it crosses the line.