Column options

QTableOptions manages the column-order, visibility, and pinning models without requiring a particular table adapter. The application applies the emitted models to its own table.

Live column options

Drag columns between the left, unpinned, and right sections while keeping state in this page.

name, status, owner · {}

Inputs and state

Prop/model	Default	Description
`columns`	required	`ColumnDefinition[]`, including column IDs, labels, and optional constraints.
`v-model:column-order`	required	Ordered IDs displayed by the control.
`v-model:invisible-columns`	required	IDs currently hidden.
`v-model:column-pinning`	required	`{ left?: string[], right?: string[] }`.
`icon`	`i-tabler-adjustments`	Trigger icon.
`shortcuts`	`true`	Enables `Shift` + `O`.
`texts`	—	Explicit text overrides, ahead of i18n and English defaults.
`icons`	—	Nested Iconify-name overrides for every default icon.
`ui.content`	—	Extra classes for the Nuxt UI popover content.

Only IDs present in column-order are shown. A column with enableHiding: false keeps a disabled visibility switch.

Reorder and pin columns — drag a column into the left, middle, or right section. The left and right sections pin it; the middle section unpins it. The component emits matching column-order and column-pinning arrays.
Show or hide a column — toggle the switch. The component adds or removes its ID from invisible-columns unless hiding is disabled.

<QTableOptions
  v-model:column-order="columnOrder"
  v-model:invisible-columns="invisibleColumns"
  v-model:column-pinning="columnPinning"
  :columns="columns"
/>

Slots

Slot	Useful slot props
`trigger`	`open`, `toggle`
`header`	`columns`
`items`	`columns`, `move`, `toggleVisibility`, `pin`
`item`	`column`, `index`, `visible`, `pin`, `toggleVisibility`

The slots let an application replace the whole list or a row while retaining the component's immutable state updates.

Column options

Inputs and state

Popover actions

Slots