Composables
useXTableColumns
Column presets for XATable — pre-configured column definitions that render common data types with appropriate formatting.
useXTableColumns
Column presets for XATable. Each preset returns a TanStack column definition pre-wired to the right cell renderer (avatar, badge, date, currency, and so on), with sorting and hiding enabled by default.
Usage
const { presets } = useXTableColumns()
const columns = [
presets.avatar('name', 'User'),
presets.text('email', 'Email'),
presets.email('email'), // auto-links mailto:
presets.badge('status', 'Status', {
colorMap: { active: 'success', inactive: 'neutral', error: 'error' },
}),
presets.date('createdAt', 'Created'), // auto-formats dates
presets.date('dueDate', 'Due', { format: 'relative' }),
presets.currency('price', 'Price', { currency: 'USD' }),
presets.number('count', 'Count', { decimals: 0 }),
presets.boolean('active', 'Active'),
presets.link('url', 'Website'),
presets.editable('name', 'Name', { inputType: 'text' }),
presets.actions({ showView: true, showEdit: true, showDelete: true }),
]
Presets
| Preset | Description |
|---|---|
avatar(key, header?) | Avatar + name cell. |
text(key, header?) | Plain text cell. |
email(key, header?) | Email with mailto: link. |
badge(key, header?, { colorMap? }) | Status badge with per-value color mapping. |
date(key, header?, { format? }) | Date cell — 'date', 'time', 'datetime', or 'relative'. |
currency(key, header?, { currency?, locale? }) | Localized currency (defaults USD, en-US). |
number(key, header?, { decimals? }) | Formatted number. |
boolean(key, header?) | Boolean icon cell. |
link(key, header?) | External link cell. |
editable(key, header?, { inputType? }) | Inline-editable cell. |
actions(options?) | Row action column (showView / showEdit / showDelete). |
AI Context
composable: useXTableColumns
package: "@xenterprises/nuxt-x-app"
use-when: Defining XATable columns for common data types without hand-writing cell renderers.