DataListingBar
The strip over a listing table: FilterTriggerBar with UxColumnPicker seated as its last segment — "which rows" and "which columns" in one right-aligned row (c95). Pass `columns` and the picker appears, drawn in the bar's TONE colours and reading "Columns" until something is hidden, then the count; omit `columns` or set columnPicker=false for the bar alone. The key dropdown is restricted to the table: only filter keys the catalog has a column for are offered (a column matches by key or by its filterKey), and one key renders as a fixed label. Its canonical seat is DataTable's #toolbar slot; the picker opens above by default so the table under it stays in view.
FilterTriggerBar + UxColumnPicker as one strip, in its canonical seat: DataTable's #toolbar. The filter is live (rows filter by team); the picker opens above so the table stays in view.
Devices
Owner | Team | Sessions | Coverage | |
|---|---|---|---|---|
| ci-runner-07 | — | platform | 1204 | Full |
| thinkpad-cho | Dana Cho | data | 231 | Partial |
| mbp-alice | Alice Ng | platform | 142 | Full |
| mbp-ravi | Ravi Menon | apps | 19 | Blocked |
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | String | '' | FilterTriggerBar lead-in text, e.g. "Global Filter :" |
| filterKeyDefs | Array | [] | FilterTriggerBar — FilterKeyDefinition[]; a dropdown only when more than one |
| filterKey | String | '' | FilterTriggerBar — the current key (v-model:filterKey) |
| options | Array | [] | FilterTriggerBar — { value, label }[] quick-select values |
| modelValue | Any | null | FilterTriggerBar — selected value; null = "All" (v-model) |
| columns | Array | null | Full column catalog { key, label, locked? } — omit it and there is no picker |
| visibleColumns | String[] | [] | Visible column keys (v-model:visibleColumns), emitted in catalog order |
| columnPicker | Boolean | true | The opt-out: false hides the picker even when columns is passed |
| columnsLabel | String | 'Columns' | Segment text while nothing is hidden, and the panel heading |
| side | String | 'above' | Where the picker panel opens; 'above' keeps the table uncovered |
| minVisible | Number | 1 | The visible set never drops below this many |
| restrictKeys | Boolean | true | Offer only the filter keys the catalog has a column for — a column matches by its key or by its filterKey (string | string[]); a current filterKey the table can't answer is replaced by the first offered one |
Events
| Event | Description |
|---|---|
| update:modelValue | FilterTriggerBar — the clicked value, or null for "All" |
| update:filterKey | FilterTriggerBar — the key chosen from the dropdown, or the first offered key when the current one has no column |
| update:visibleColumns | UxColumnPicker — the visible keys after a toggle or Show all |
Slots
| Slot | Description |
|---|---|
| end | Further trailing segment(s) on the bar, after the picker; scope { tone } (the bar's colour roles) |