Data grid · Lab

Per-column filters

The real Rocky Creek fleet — 50 buses — with filtering moved out of the toolbar and into the column headers. Click a label to sort. Click the funnel beside it to filter that column. It's live; break it.

What we're solving

Today /fleet filters by one hand-written toolbar button (Status) and /tablets by three (Updates · Device · Assignment). Each is about 35 lines of bespoke Popover, each covers only the column someone thought to wire up, and none of them sit anywhere near the data they act on. Make, Model, Year, Route, Seats, Mileage and Defects have no filter at all.

The plumbing was already here: both grids register TanStack's faceted row models and never read them, and ui/table-header-filter.tsx has shipped a header-popover mode since day one with zero call sites. This lab spends both.

The grid

50 of 50 buses


0019	At Depot	Blue Bird	Vision	2019	181	Interior deep-cleaned	73	91,040	0
0315	At Depot	Thomas	Saf-T-Liner C2	2015	131	—	75	135,946	0
0717	On Route	Blue Bird	Vision	2017	265	—	72	111,055	0
0817	Out of Service	Thomas	Saf-T-Liner HDX	2017	08	In shop — air brake compressor	84	128,441	1
0923	At Depot	Thomas	Saf-T-Liner HDX	2023	—	Wiper blades ordered	87	40,962	0
1019	On Route	Blue Bird	Vision	2019	295	Squeak from rear door	73	81,022	0
1225	On Route	Blue Bird	Vision	2025	82	—	74	18,013	0
1419	On Route	Blue Bird	Vision	2019	14	Stop-arm light — parts ordered	72	84,213	1
2020	On Route	Blue Bird	Vision	2020	218	Battery replaced	77	78,088	0
2121	At Depot	Thomas	Saf-T-Liner C2	2021	39	Wiper blades ordered	76	61,744	0
2519	Out of Service	Thomas	Saf-T-Liner C2	2019	259	In shop — see open defect	71	90,776	1
2621	At Depot	Thomas	Saf-T-Liner C2	2021	186	—	73	66,119	0
2815	At Depot	Blue Bird	Vision	2015	—	Interior deep-cleaned	73	134,868	0
2921	At Depot	Thomas	Saf-T-Liner C2	2021	21	—	71	41,590	0
3022	At Depot	Thomas	Saf-T-Liner C2	2022	91	—	71	55,308	0
3119	On Route	Blue Bird	Vision	2019	195	Front tires due in fall	75	91,549	0
3223	At Depot	Thomas	Saf-T-Liner C2	2023	—	Camera SD card swapped	73	39,937	0
3322	On Route	Thomas	Saf-T-Liner C2	2022	143	Camera SD card swapped	73	47,956	0
3422	On Route	Blue Bird	Vision	2022	208	Wiper blades ordered	73	45,310	0
3518	Out of Service	Thomas	Saf-T-Liner HDX	2018	250	In shop — see open defect	83	97,780	1
3620	At Depot	Thomas	Saf-T-Liner C2	2020	20	A/C blowing warm at idle	71	70,432	0
3722	At Depot	Blue Bird	Vision	2022	286	Interior deep-cleaned	74	53,591	0
3820	At Depot	Blue Bird	Vision	2020	106	—	74	77,101	0
4020	At Depot	Blue Bird	Vision	2020	—	Wiper blades ordered	72	69,683	0
4116	On Route	Thomas	Saf-T-Liner HDX	2016	25	Front tires due in fall	80	121,046	0
4216	On Route	Blue Bird	Vision	2016	252	—	77	120,051	0
4320	At Depot	Blue Bird	Vision	2020	84	—	76	77,642	0
4425	At Depot	Blue Bird	Vision	2025	140	Squeak from rear door	74	10,116	0
4722	At Depot	Blue Bird	Vision	2022	114	Interior deep-cleaned	77	45,276	0
4925	At Depot	Blue Bird	Vision	2025	260	—	72	13,718	0
5615	At Depot	Thomas	Saf-T-Liner C2	2015	71	—	74	137,084	0
6019	On Route	Blue Bird	Vision	2019	100	Front tires due in fall	74	82,677	0
6318	At Depot	Thomas	Saf-T-Liner C2	2018	287	Battery replaced	71	98,404	0
6923	On Route	Thomas	Saf-T-Liner HDX	2023	83	Wiper blades ordered	78	40,305	0
7225	Out of Service	Blue Bird	Vision	2025	117	In shop — see open defect	75	9,746	1
7324	At Depot	Blue Bird	Vision	2024	—	—	72	24,806	0
7620	At Depot	Thomas	Saf-T-Liner C2	2020	263	A/C blowing warm at idle	74	79,977	0
7720	On Route	Thomas	Saf-T-Liner C2	2020	153	Front tires due in fall	72	70,392	0
7915	On Route	Thomas	Saf-T-Liner C2	2015	256	—	75	137,612	0
8017	On Route	Blue Bird	Vision	2017	07	Interior deep-cleaned	77	108,882	0
8519	On Route	Thomas	Saf-T-Liner C2	2019	133	—	77	90,051	0
8723	On Route	Blue Bird	Vision	2023	105	Wiper blades ordered	71	39,069	0
8819	On Route	Thomas	Saf-T-Liner C2	2019	188	—	73	86,058	0
8925	On Route	Blue Bird	Vision	2025	139	—	72	18,366	0
9016	At Depot	Thomas	Saf-T-Liner HDX	2016	98	—	90	123,996	0
9215	At Depot	Thomas	Saf-T-Liner C2	2015	104	—	77	134,957	0
9324	On Route	Thomas	Saf-T-Liner HDX	2024	194	—	79	23,146	0
9720	At Depot	Blue Bird	Vision	2020	99	Battery replaced	75	77,288	0
9825	On Route	Blue Bird	Vision	2025	113	Front tires due in fall	75	16,028	0
9918	On Route	Thomas	Saf-T-Liner C2	2018	211	Squeak from rear door	75	102,083	0

Live filter state

No column filters active.

States worth poking at

Counts narrow as you filter

Check Blue Bird under Make, then open Model. The counts are for buses that pass every other column's filter — but Make's own list stays whole, so the box you just ticked can never vanish under your cursor.

A hidden column keeps filtering

Filter Defects, then switch it off in the Columns menu — the row count holds. Its checkbox there keeps a brand funnel, the readout below the grid says (column hidden), and every other column's menu offers Clear all. Narrow the window pastxl for the same thing by responsive tier.

Long lists search, short ones don't

Route and Bus # pass eight distinct values and grow a search box; Make and Status stay a bare list. Search something absurd to see the no-match line.

Nothing you type gets lost

Checkboxes filter on the tick and leave the menu open. Min/Maxcommit on a short debounce — so typing 40000 doesn't filter at 4, then 40, then 400, and dismissing with Escape still keeps what you typed. Committing on blur looked right and quietly dropped the entry, because the popover unmounts without the input ever blurring. Put a Min above the Max to see it say so.

Still open

Right-aligned columns mirror. On Seats / Mileage / Defects the funnel takes the far left edge so the label stays flush right with the numbers under it. Alignment won over icon-side consistency — say if that's the wrong trade.
Notes has no funnel. Free text with no natural value set. It could take a contains-search or a Has note / No note pair, but both would be invented rather than asked for.
Bus # is a 50-value checklist. Correct per the checklist-everywhere rule, but a contains-search may serve an identifier column better than fifty checkboxes.
Ranges are two number boxes, not a slider. A dual-thumb slider has no native control behind it; ui/range-editor-popover.tsx is single-value only.