Patterns · Table and filters
Table with filters
A dense table with a filter bar that reads as one control surface. The window and the instrument are chosen with a Select and a Combobox; the multi-select dimension is a facet filter over the table's own faceted values. Every control is a LUC component and the table stays the thing you read.
Filter bar plus table
Global search, a window Select, an instrument Combobox and two facet filters, all wired to the same table.
| Equity | ||||||||
|---|---|---|---|---|---|---|---|---|
| ETH-USD | Trend breakout | Draft | 2.07 | -0.3% | Sep 21 | |||
| BTC-USD | Volatility carry | Paused | 2.00 | 41.7% | Sep 13 | |||
| BTC-USD | Funding basis | Draft | 1.97 | 19.5% | Sep 23 | |||
| GC | Trend breakout | Draft | 1.87 | 30.9% | Sep 22 | |||
| AAPL | Cross-sectional momentum | Live | 1.73 | -3.8% | Aug 24 | |||
| GC | Funding basis | Paused | 1.73 | 35.0% | Sep 20 | |||
| GC | Regime switch | Paused | 1.60 | 1.9% | Sep 8 | |||
| NDX | Volatility carry | Live | 1.55 | 23.0% | Sep 9 | |||
| NVDA | Trend breakout | Live | 1.54 | 21.7% | Sep 19 | |||
| NVDA | Regime switch | Paused | 1.47 | 32.1% | Sep 4 |
1–10 of 48 runs
48 of 48 runs pass the bar. The table itself is unaware of the window and instrument controls.
Why these controls
Each control matches the shape of the question.
Window
Three known options, always the same three. A Select: no search box for three rows.
Instrument
A list that grows and that people search by name or ticker. A Combobox.
Status, Regime
Multi-select dimensions with counts from the data. A facet filter over the table's own faceted values.
<DataTableToolbar search={{ label: "Search runs" }}>
<Select value={window} onValueChange={setWindow}>...</Select>
<Combobox options={assets} aria-label="Instrument filter" />
<FacetFilter columnId="status" label="Status" />
</DataTableToolbar>