Table
TableCellRenderer
Renders table cell content from a column preset (text, email, badge, date, currency, number, boolean, avatar, link).
TableCellRenderer
A renderless cell renderer that picks the appropriate display format based on the column's meta.preset field. Use it inside custom cell templates for <XATable> to keep formatting consistent with the built-in preset column types exposed by useXTableColumns().
Components
<XATableCellRenderer />
<XATableCellRenderer
:value="row.email"
:column="{ meta: { preset: 'email' } }"
:row="row"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | boolean | Date | object | array | null | The raw cell value to render. |
column | Object | required | Column descriptor. Reads column.meta.preset to pick the renderer. |
row | Object | {} | Full row data — used by the avatar preset to derive name/fallback. |
Supported presets
| Preset | Behavior |
|---|---|
text (default) | Plain text. Falls back to — when the value is null/undefined. |
email | Clickable mailto: link. |
link | External link with target="_blank" + rel="noopener noreferrer". |
badge | <UBadge> whose color comes from column.meta.colorMap[value] or the built-in status→color table. |
date | Localized date. Supports format: 'relative' | 'time' | 'datetime' | 'date' in column.meta. |
currency | Intl.NumberFormat currency. Configure with column.meta.currency and column.meta.locale. |
number | Locale-formatted number. Configure with column.meta.decimals and column.meta.locale. |
boolean | Check / X icon (no text). |
avatar | <UAvatar> plus optional name. Configure with column.meta.size and column.meta.showName. |
Default badge color map
The following strings auto-map to semantic colors when no explicit colorMap is set:
active → success approved → success completed → success
inactive → neutral rejected → error cancelled → error
pending → warning draft → neutral published → success
enabled → success disabled → neutral archived → neutral
true → success false → neutral yes → success no → neutral
AI Context
component: XATableCellRenderer
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
Inside custom <XATable> cell templates when you need a single renderer
that adapts to the column's preset. Pair with useXTableColumns() presets
to keep column definitions and cell rendering in sync.
preset-resolution: "column.meta.preset ?? 'text'"