link Renderer

renderAs: 'link' renders a field value as a navigable <a> element. Both text and url accept a function receiving the entity, enabling fully dynamic link construction.

Core Examples

Basic Link

Profile URL rendered as a fixed-text link opening in a new tab.

Name	Profile
Aurora Chen	View profile
Mateo Silva	View profile
Priya Nair	View profile

{
  key: 'profile',
  renderAs: 'link',
  renderAsOptions: { text: 'View profile', newTab: true },
}

Dynamic Link Text

text and url each accept (entity) => string. This lets you construct labels and URLs from any combination of row fields.

Link text is generated per-row using the entity name.

Name	Profile (dynamic text)
Aurora Chen	Profile → Aurora Chen
Mateo Silva	Profile → Mateo Silva
Priya Nair	Profile → Priya Nair

{
  key: 'profile',
  renderAs: 'link',
  renderAsOptions: {
    text: (entity) => `Profile → ${entity.name}`,
    newTab: true,
  },
}

Auto-Detection

When the field is declared type: 'email' and no explicit url is provided, the renderer automatically prefixes mailto: — provided the value passes email format validation. No url option is required.

Email addresses rendered as clickable mailto links with no url option required.

Name	Email
Aurora Chen	aurora@example.com
Mateo Silva	mateo@example.com
Priya Nair	priya@example.com

{ key: 'email', type: 'email', renderAs: 'link' }

Auto-detection is gated on two conditions: type: 'email' must be declared and the value must be a valid email address. A type: 'text' field whose value happens to contain @ does not get auto-prefixed. Providing an explicit url option always bypasses auto-detection entirely.

URL Override

url sets the href independently of the field value. Use it when the URL must be derived from other fields, or when you need a scheme like tel:, sms:, or an internal app route.

Call link built from a separate phone field; the key field is only used for row identity.

Name	Call
Aurora Chen	+15550000001
Mateo Silva	+15550000002
Priya Nair	+15550000003

{
  key: 'name',
  renderAs: 'link',
  renderAsOptions: {
    url: (entity) => `tel:${entity.phone}`,
    text: (entity) => entity.phone,
  },
}

Options Reference

Option	Type	Default	Effect
text	string | (entity) => string	field value	Visible link label. Falls back to the raw field value when omitted.
url	string | (entity) => string	field value	href of the anchor. Falls back to the raw field value when omitted.
newTab	boolean | (entity) => boolean	false	Opens the link in a new browser tab (target="_blank" + rel="noopener noreferrer").
externalWarning	boolean	false	Shows a visual indicator when the URL navigates away from the current origin.
className	string	unset	Additional CSS class on the root element.

Caveats

• If both text and url are omitted, the raw field value is used as both the label and the href.
• newTab: true automatically adds rel="noopener noreferrer" to mitigate reverse tabnapping.
• Function forms of text and url receive the full entity object. Keep the functions pure — avoid side effects.
• If the resolved href fails internal URL validation, the renderer falls back to plain text rather than rendering a broken link.
• type: 'email' fields get automatic mailto: construction when renderAs: 'link' is applied — provided the value passes email format validation. Values that fail validation render as plain text.
• type: 'url' fields use the raw value as href as-is; ensure values include the full scheme (https://). No automatic scheme is added.

See Also

• url Field Type — field type with URL validation
• email Field Type
• Field Config