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

Reorder, hide and pin columns while keeping state in this page.

name, status, owner

Open column-options popover

Column pin actions

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.
`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 columns — drag a row onto another row. The component emits a reordered column-order array.
Show or hide a column — toggle the switch. The component adds or removes its ID from invisible-columns unless hiding is disabled.
Pin left or right — open the pin action and choose Left or Right. The ID is removed from the other side first, then added to the selected side.
Unpin — choose Unpin to remove the ID from both pinning arrays.

<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