UxColumnPicker
components/ux/ColumnPicker.vue
Checkbox popover that shows/hides table columns — full catalog in, visible keys out via v-model in catalog order; locked columns and the last visible column cannot be unchecked.
Devices
Owner | Team | Sessions · 7d | Coverage | |
|---|---|---|---|---|
| mbp-alice | Alice Ng | Platform | 142 | Full |
| thinkpad-cho | Dana Cho | Data | 231 | Partial |
| ci-runner-07 | — | Platform | 1204 | Full |
| mbp-ravi | Ravi Menon | Apps | 19 | Blocked |
visible: name, owner, team, sessions, coverage
Scenarios
minimal — 3 columns, none locked
guard — only the locked column visible
overflow — 16 columns, list scrolls
#trigger slot — a text link built from the slot's counts
components/ux/ColumnPicker.vue
Usage
<UxColumnPicker
:columns = "—"
:modelValue = "[]"
label = "Columns"
align = "right"
side = "below"
:minVisible = "1"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | Array | — | Full catalog: { key, label, locked? } |
| modelValue | String[] | [] | Visible column keys (v-model), emitted in catalog order |
| label | String | 'Columns' | Trigger text and panel heading |
| align | String | 'right' | Panel alignment passed to UxPopover |
| side | String | 'below' | 'above' opens the list over the title area so the columns being toggled stay in view |
| minVisible | Number | 1 | The visible set never drops below this many |
Events
| Event | Description |
|---|---|
| update:modelValue | When a column is toggled or Show all is pressed |
Slots
| Slot | Description |
|---|---|
| trigger | Replaces the default bordered trigger button so a host can draw it in its own chrome (DataListingBar draws a bar segment); scope { open, label, visibleCount, hiddenCount, total } |