Field Components Overview

Field components define how individual item values are displayed inside any mode. Fields are stable across mode switches — the same field config works in a table row, a grid card, or a carousel slide.

Canonical references:

• Item Config — ItemConfig shape and item layout
• Field Config — FieldConfig schema and built-in catalogs
• Field Rendering Reference — type vs renderAs guidance

When to Use Each Layer

Layer	Use when	Config key
type	The field has a known semantic category (date, image, boolean…)	fields[].type
renderAs	You need a specific visual presentation for any value	fields[].renderAs
Custom renderAs	You need a reusable visual renderer not covered by the built-ins	Extension Architecture
Custom field type	Domain behavior should be reusable and registered first-class	Custom Field Types

If both type and renderAs are set on the same field, renderAs controls display — the type switch is skipped entirely. However, type still has two concrete effects: it determines wrap clipping behavior (image type is excluded from wrap=false clip treatment; email and url types apply forced word-breaking under wrap=true), and it acts as a fallback display if the renderAs renderer returns nothing. Set type alongside renderAs when the field's data category matters for wrap behavior or for documentation clarity.

Built-in Field Types

Field types are set with fields[].type. Each column renders a field using its native type — plain text, a formatted number, and so on.

Six fields, no renderAs — each value is rendered by its type alone.

name (text)	status (text)	score (number)	budget (number)	rating (number)	change (number)
Aurora Chen	active	78	4,200	4	12
Mateo Silva	pending	45	7,800	3	-5
Priya Nair	inactive	91	1,500	5	3

Group	Types
Core	text, number, boolean, textarea, select, reference
Contact and Media	email, url, image, swatch
Temporal	date, time, datetime, timestamp, duration

Built-in renderAs Renderers

renderAs controls how a value looks, independent of its type. The table below shows the exact same fields as above — only the column headers and visual output change.

Same six fields, same data — now each column applies a renderAs renderer instead of relying on the type alone.

name (text)	status → badge	score → progress	budget → currency	rating → rating	change → deltaValue
Aurora Chen	active	78%	$4,200.00		UP +12%
Mateo Silva	pending	45%	$7,800.00		DOWN -5%
Priya Nair	inactive	91%	$1,500.00		UP +3%

Renderer	Best for
badge	Status labels, category tags
progress	Percentage or capacity values
currency	Monetary amounts with locale formatting
rating	Star or icon-based score display
deltaValue	Signed change values with trend color
sparkTrend	Array-valued trend lines
scoreMeter	Numeric score with a visual meter
compositionBar	Multi-segment proportion bars
link	URLs or email addresses as clickable links
jsonPreview	Collapsible JSON object preview

Field Guides

• text
• number
• boolean
• select
• reference
• textarea
• email
• url
• image
• swatch
• date
• time
• datetime
• timestamp
• duration
• Temporal Fields Guide

See Also

• Field Config — canonical field contract
• Renderer Components Overview — built-in and custom renderers
• Custom Field Types — domain-level extension