CnCellRenderer

Type-aware cell renderer for schema-driven tables. Automatically formats values based on the schema property type.

Wraps: CnStatusBadge, CheckBold icon

Try it

Loading CnCellRenderer playground…

Props

Prop	Type	Default	Description
value	any	null	Cell value
property	Object	\{\}	Schema property definition
formatter	String	null	Optional cell-formatter id. When set and resolvable in the injected cnFormatters registry (provided by CnAppRoot), the cell renders cnFormatters[formatter](value, row, property) as text — overriding the type-aware rendering. Built-in formatters (registered by CnAppRoot by default): "date" (Intl.DateTimeFormat dateStyle:"medium"), "datetime" (date + timeStyle:"short"), "relative-time" (Intl.RelativeTimeFormat, "3 days ago"). All built-ins are safe against null/empty/non-parseable input (return '' / original value, no throw). Consumer-registered formatters with the same id win. Unknown id / missing registry / a throwing formatter all fall back. See migrating-to-manifest → Column formatters.
widget	String	null	Optional cell-widget id. When it resolves in the injected cnCellWidgets registry (provided by CnAppRoot), the cell renders that component with { value, row, property, formatted, ...widgetProps }. Built-ins (resolved without a registry entry): "badge" → CnStatusBadge; "link" → a router-link (when widgetProps.route is set, a manifest page id) / external <a target="_blank"> (when widgetProps.href is set, with {key} placeholder substitution from the row) / plain text + once-per-session console.warn when neither resolves (set widgetProps.fallback:"silent" to suppress the warn). Takes precedence over formatter / the type-aware rendering (the widget gets the formatter-shaped value as formatted when formatter is also set). Consumer-registered widgets with the same id override the built-ins. Unknown id falls back. See migrating-to-manifest → Column widgets.
widgetProps	Object	\{\}	Extra props spread onto the resolved cell-widget component. Recognised by the built-ins: variant (badge), colorMap (badge — a { value: variant } map, e.g. { placed: 'primary', delivered: 'success' }, resolved per label by CnStatusBadge; falls back to variant), route + params (link router-link), href (link external anchor), fallback:"silent" (link no-warn).
format	Object	null	Optional declarative cell-format — a no-code alternative to a registry formatter. Recognised style values: "currency" (Intl currency, e.g. € 1.234,56; honours currency ISO code default "EUR" and decimals default 2), "number" / "percent" (localized number, percent appends %; decimals default 0), "duration" (a seconds value rendered compact like 1u 23m / 45m 10s / 12s; pass unit: "minutes" / "hours" when the raw value is not seconds), and "swatch" (a colour dot read from the sibling row field named by colorField, default "color", beside the cell text). prefix / suffix wrap the numeric/duration styles. Resolved AFTER formatter / widget (those win), BEFORE the type-aware default.
row	Object	\{\}	The full row object — passed so a formatter can be a function of the whole record (e.g. "days since @self.updated"), not just this one cell value. Also the source of a format:"swatch" cell's colour field.
rowKey	String	'id'	Row identifier field — used by the built-in widget:"link" when widgetProps.params is not declared (default param map is { id: row[rowKey] }).
truncate	Number	100	Max string length before truncation

Type Rendering

Property Type	Rendering
Boolean	CheckBold icon (green/hidden)
Enum	CnStatusBadge pill
Array	Comma-joined values or item count
Date/datetime	Formatted date string
UUID	Monospace styling
Number	Tabular-nums CSS
String (long)	Truncated with tooltip showing full value

Usage

CnCellRenderer is used internally by CnDataTable. You typically don't use it directly unless building a custom table:

<CnCellRenderer
  :value="row.status"
  :property="schema.properties.status" />

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnCellRenderer.vue and update automatically whenever the component changes.

Props

Name	Type	Required	Default	Description
value	string|number|boolean|array|object		null	The raw cell value
property	object		\{\}	Schema property definition: { type, format, enum, items, title }
formatter	string		null	Optional cell-formatter id (e.g. currency, automationTrigger). When set and resolvable in the injected cnFormatters registry, the cell renders cnFormatters[formatter](value, row, property) as text — an explicit override of the type-aware rendering below.
widget	string		null	Optional cell-widget id (e.g. badge, or a consumer-registered name). When it resolves in cnCellWidgets the cell renders that component with { value, row, property, formatted, ...widgetProps }; the built-in id "badge" renders CnStatusBadge. Takes precedence over formatter/the type-aware rendering, but the value handed to the widget is the formatter-shaped formatted when formatter is also set.
widgetProps	object		\{\}	Extra props spread onto the resolved cell-widget component.
format	{style?: 'currency'|'number'|'percent'|'duration'|'swatch', currency?: string, decimals?: number, unit?: 'seconds'|'minutes'|'hours', prefix?: string, suffix?: string, colorField?: string}		null	Optional declarative cell-format spec — a no-code alternative to a registry formatter. Recognised style values: - 'currency' → Intl.NumberFormat currency (e.g. € 1.234,56), honouring currency (ISO code, default 'EUR') and decimals (default 2). - 'number' / 'percent' → localized number (percent appends %), honouring decimals (default 0). - 'duration' → a seconds value rendered compact (1u 23m, 45m 10s, 12s); pass unit: 'minutes' / 'hours' when the raw value is not in seconds. - 'swatch' → a colour dot read from a sibling row field named by colorField (the value renders as the cell text beside it). prefix / suffix are prepended/appended to the numeric styles. Resolved AFTER formatter / widget (those win), but BEFORE the type-aware rendering, so a manifest column can opt into currency or a colour swatch without registering a function.
row	object		\{\}	The full row object — passed so a formatter can be a function of the whole record (e.g. "days since @self.updated"), not just this one cell value.
truncate	number		100	Maximum string length before truncation
rowKey	string		'id'	Row identifier field — used by the built-in widget:"link" when the manifest doesn't specify an explicit widgetProps.params map. Defaults to 'id' so router-link param resolution works with the manifest convention (/x/:id).