Field Type and RenderAs Decisions

This page defines how type and renderAs are interpreted when rendering a field, and when to extend behavior through the registry.

Rendering Layers

Layer	Purpose	Config key	Extension point
`type`	Semantic field classification and default renderer selection	`item.fields[].type`	Custom Field Types
`renderAs`	Explicit visual renderer override	`item.fields[].renderAs`	Custom renderAs
Custom `renderAs`	Reusable presentation behavior outside built-in renderer set	registry `renderAs` entry	Extension Architecture
Custom field type	Reusable domain semantics with type-level behavior	registry field type entry	Extension Architecture

Resolution Rules

Rule	Outcome
`renderAs` present	`renderAs` determines final visual output
`renderAs` absent and `type` present	Renderer resolves from type/default type handling
Both `type` and `renderAs` present	`type` remains semantic metadata; `renderAs` controls display
Neither present	Falls back to default text-like rendering

`renderAs` Precedence

If both type and renderAs are set, renderAs controls the final display.

// Semantic only (default type rendering)
{ key: 'status', type: 'text' }

// Visual override (renderAs wins)
{ key: 'status', type: 'text', renderAs: 'badge' }

Keep type even when using renderAs if semantic meaning matters for readability or future tooling.

Selection Heuristics

Start with type for straightforward value rendering.
Add renderAs when a richer visual treatment improves comprehension.
Use custom renderAs before custom field types when the need is primarily presentational.
Use custom field types when semantics and behavior should become a reusable first-class type.

Configuration Patterns

Semantic Date (type only)

{ key: 'joinedAt', label: 'Joined', type: 'date' }

Semantic Date with Explicit Renderer

{
  key: 'joinedAt',
  label: 'Joined',
  type: 'date',
  renderAs: 'date',
  renderAsOptions: { parseMode: 'iso-date', locale: 'en-US', timezone: 'utc' },
}

Text Field Rendered as Badge

{
  key: 'status',
  label: 'Status',
  type: 'text',
  renderAs: 'badge',
  renderAsOptions: {
    colorMap: {
      active: '#198754',
      pending: '#ffc107',
      inactive: '#dc3545',
    },
  },
}

Rendering Layers​

Resolution Rules​

renderAs Precedence​

Selection Heuristics​

Configuration Patterns​

Semantic Date (type only)​

Semantic Date with Explicit Renderer​

Text Field Rendered as Badge​

See Also​