Table
TableColumnToggle
Popover-based column visibility switcher with show-all and reset controls.
TableColumnToggle
A ⋯ columns button that opens a popover with a checkbox per column. Designed to pair with <XATableToolbar> via two-way v-model:visibleColumns (or any parent that tracks which columns are visible).
Components
<XATableColumnToggle />
<XATableColumnToggle
v-model="visibleColumns"
:columns="columns"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | Column[] | required | Full column list — checkbox entries come from this array. |
modelValue | string[] | [] | Array of visible column IDs. v-model target. When empty / unset, all columns are treated as visible. |
Each column descriptor needs at least one of: id, accessorKey, or key (used as the column identifier) and at least one of: header, label, or id (used as the checkbox label).
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | (visibleColumnIds: string[]) | Fired when the user toggles a column, clicks All, or clicks Reset. |
Footer indicator
The popover shows N column(s) hidden at the bottom whenever at least one column is hidden.
AI Context
component: XATableColumnToggle
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
Any data table where users need to hide columns they don't care about.
Pair with XATableToolbar (which mounts this component automatically when
showColumnToggle is true) or use standalone with v-model:visibleColumns.
default-state: "empty modelValue === all columns visible"