Composables
useColumns
Derives reactive table column definitions from a schema descriptor, with support for visibility toggling and ordering.
useColumns
Generates a reactive, user-configurable column definition list from a declarative schema object. Each column tracks its visibility and order, and the composable exposes helpers to toggle, reorder, and reset columns — powering the column-picker UI in XATableColumns and XADataTable.
Usage
const { columns, visibleColumns, toggle, reorder, reset } = useColumns({
name: { label: "Name", visible: true },
email: { label: "Email", visible: true },
role: { label: "Role", visible: false },
createdAt: { label: "Created", visible: true },
})
Returns
| Key | Type | Description |
|---|---|---|
columns | Ref<ColumnDef[]> | Full ordered column definition list (visible and hidden). |
visibleColumns | ComputedRef<ColumnDef[]> | Subset of columns where visible is true. |
toggle | (key: string) => void | Toggles the visibility of the column with the given key. |
reorder | (from: number, to: number) => void | Moves a column by array index. |
reset | () => void | Restores all columns to their original schema defaults. |
Example
const { visibleColumns, toggle, reset } = useColumns({
id: { label: "ID", visible: false },
name: { label: "Full Name", visible: true },
status: { label: "Status", visible: true },
updatedAt: { label: "Last Updated", visible: true },
})
// Pass to table
// <XATable :columns="visibleColumns" :rows="rows" />
AI Context
composable: useColumns
package: "@xenterprises/nuxt-x-app"
use-when: >
Tables where users should be able to show, hide, or reorder columns via a
column-picker popover. Define the schema once; the composable manages state
and persistence so the table always renders only the selected columns.
pairs-with: XATableColumns, XADataTable, XATable, useDataTable