Renderer Components Overview

Renderers control how a field value is displayed. Set renderAs on any field config to override the default type-based display with a purpose-built visual output — a badge, a progress bar, a trend sparkline, a formatted currency amount, and so on.

Renderers are independent of field type: a number field can render as currency, progress, rating, scoreMeter, or deltaValue. A text field can render as badge. An email or url field can render as link. Renderer choice is driven by what the data means and how it should look, not by the storage type.

All Built-in Renderers at a Glance

Ten non-temporal built-in renderers applied to a single dataset. Each column uses a different renderAs value. The Name column is plain text with no renderer.

Name	status → badge	score → scoreMeter	budget → currency	change → deltaValue	completion → progress	rating → rating	trend → sparkTrend	breakdown → compositionBar	profile → link	meta → jsonPreview
Aurora Chen	active	Good78	$4,200.00	UP +12%			+26.0%		View	"team": "platform" "region": "APAC"
Mateo Silva	pending	Low45	$7,800.00	DOWN -5%			-15.0%		View	"team": "infra" "region": "EMEA"
Priya Nair	inactive	High91	$1,500.00	UP +3%			+11.0%		View	"team": "ops" "region": "Americas"

How renderAs Relates to type

If both type and renderAs are set on a field, renderAs controls display — the type switch is bypassed entirely. However, type still has two effects:

• Wrap behavior: image is excluded from wrap: false clipping; email and url apply forced word-breaking under wrap: true
• Semantic intent: signals the data's category to developers and future tooling (inline editing, filtering)

As a practical rule: always set type, set renderAs when the default type rendering isn't the right visual.

// type drives display — plain text
{ key: 'status', type: 'text' }

// renderAs overrides display — badge widget
{ key: 'status', type: 'text', renderAs: 'badge' }

Renderer Reference

Value and Label Renderers

Renderer	Best for	Key options
badge	Status labels, category tags	colorMap, defaultColor, pill
currency	Monetary amounts	locale, currency, decimals
progress	Percentage or capacity (0–100)	color, height, showPercentage
rating	Star or icon score display	max, size, color, icon

Metric and Analytical Renderers

Renderer	Best for	Key options
deltaValue	Signed change values with trend color	positiveColor, negativeColor, suffixPercent
sparkTrend	Array-valued trend lines	width, height, positiveColor, negativeColor
scoreMeter	Numeric score with a visual progress meter and band label	density, bands, showValue, tagPosition
compositionBar	Multi-segment proportion bars	segments, legend, barHeight, palette

Link and Data Renderers

Renderer	Best for	Key options
link	URLs and email addresses as clickable links	text, url, newTab, externalWarning
jsonPreview	Collapsible inline JSON object preview	maxDepth, expanded

Temporal Renderers

Temporal renderers require parseMode (or unit for duration) in renderAsOptions. See the Temporal Fields Guide for the full contract.

Renderer	Field type pairing	Required option
date	type: 'date'	parseMode
time	type: 'time'	parseMode
datetime	type: 'datetime'	parseMode
timestamp	type: 'timestamp'	parseMode
duration	type: 'duration'	unit

Custom Renderers

Register a renderAs renderer for domain-specific visuals not covered by the built-ins:

• Custom renderAs — registration and runtime usage
• Extension Architecture — how plugins and extensions work

Renderer Guides

Value renderers

• badge
• currency
• progress
• rating

Metric renderers

• deltaValue
• sparkTrend
• scoreMeter
• compositionBar

Link and data renderers

• link
• jsonPreview

Temporal renderers

• date
• time
• datetime
• timestamp
• duration

See Also

• Field Components Overview — field types and the type vs renderAs decision
• Field Config — full field contract and renderer option types
• Temporal Fields Guide — cross-cutting temporal contracts