text Field Type
type: 'text' renders a string value as plain text. It is the default type — any field without an explicit type falls back to text rendering.
Core Examples
Basic Text Fields
Two text fields: name and role, both rendered as plain strings.
fields: [
{ key: 'name', label: 'Name', type: 'text' },
{ key: 'role', label: 'Role', type: 'text' },
]
Wrap Control
wrap: false clips content to a single line. In card-based modes (grid, carousel, board), the card's fixed boundary constrains the field — overflowing text is replaced with an ellipsis and the full value appears on hover. In table mode, the column cell expands to fit nowrap content rather than clipping, so text stays on one line but the table may scroll horizontally.
wrap: true allows text to flow across multiple lines within its container.
wrap: false — single line with ellipsis (grid)
Each card has a fixed width from the grid column. Bio clips to one line with ellipsis. Hover to see full value.
{ key: 'bio', label: 'Bio', type: 'text', wrap: false }
wrap: true — multi-line (grid)
Same fields. Bio wraps across as many lines as needed instead of clipping.
{ key: 'bio', label: 'Bio', type: 'text', wrap: true }
Formatter
formatter transforms the raw value before display. It receives (value, entity) and must return the value to render — the entity is not mutated and the original data is unchanged.
Name → initials; Role uppercased; Bio → word count.
{
key: 'name',
label: 'Initials',
type: 'text',
formatter: (value) =>
String(value ?? '')
.split(' ')
.map((w) => w[0] + '.')
.join(''),
},
{
key: 'role',
label: 'Role (upper)',
type: 'text',
formatter: (value) => String(value ?? '').toUpperCase(),
},
{
key: 'bio',
label: 'Word count',
type: 'text',
formatter: (value) => {
const words = String(value ?? '').trim().split(/\s+/).filter(Boolean);
return words.length + ' words';
},
},
Condition
condition receives the full entity and returns true to show the field or false to hide it entirely. Evaluated per row — different rows can show or hide the same field independently.
Bio column only renders for Aurora and Priya (bio > 60 chars). Mateo's 59-char bio is hidden.
{
key: 'bio',
label: 'Bio (only when long)',
type: 'text',
condition: (entity) => String(entity.bio ?? '').length > 60,
},
Field Options Reference
| Option | Type | Default | Effect |
|---|---|---|---|
key | string | required | Entity property to read the value from. |
label | string | unset | Column header or card label. |
type | 'text' | 'text' | Renders the value as a plain string. |
wrap | true, false | inherited from ItemConfig.wrap | false: single line. In card modes, clips with ellipsis + hover tooltip. In table mode, column expands instead. true: multi-line wrapping. |
formatter | (value, entity) => unknown | unset | Transforms the raw value before display. Does not mutate the entity. |
condition | (entity) => boolean | unset | Hides the field for rows where the function returns false. |
width | CSS length or number | unset | Sets column width in table mode. |
align | 'left', 'center', 'right' | 'left' | Text alignment in table mode. |
showLabel | true, false | true when label is set | Shows or hides the label in card/grid layouts. |
renderAs | string | unset | Replaces text rendering with a named renderer. type is bypassed when set. |
Mode-Specific Notes
widthandalignapply in table mode only; they have no effect in grid or carousel card layouts.showLabelapplies in card-based layouts (grid, carousel, board); table always uses column headers.
See Also
- Item Config — item-level shape and layout contract
- Field Config — full field contract
- number Field Type
- textarea Field Type
- Renderer Components Overview