1920 × 1080 · Landscape
Index › Data Grid › Cell Renderers
7 cell renderers
Data Grid · Cell Renderers
Every cell, typed.
Seven adapter-agnostic renderers turn raw clinic values into the right cell — status pills, badges, mono money, dates, a threshold bar, a boolean glyph, and a row menu. Status reads in moss, amber, and rust; the row menu stays neutral until focus.
StatusCellcellRenderer={StatusCell}
Maps a status key to a StatusBadge — color and text together, never color alone.
AppointmentBooked
MicroneedlingOn hold
Lip fillerCancelled
DermaplaningPending
valuecategoryMaplabelMapvariant="badge"
BadgeCellcellRenderer={BadgeCell}
Renders a value as a labeled Badge — outline by default, capitalized.
TreatmentFacial
TreatmentMicroneedling
TierMember
TierVIP
valuevariantMaplabelMapcapitalize=true
BooleanCellcellRenderer={BooleanCell}
Shows a check or cross glyph for a boolean — or plain text via trueText / falseText.
Consent on file
Patch test done
Balance cleared
Paid in full trueTextYes · No
valuecolored=falsetrueTextfalseText
CurrencyCellcellRenderer={CurrencyCell}
Right-aligned money in mono tabular-nums so invoice columns line up to the cent.
Signature Facial$240.00
Microneedling$420.00
Lip Filler$540.00
Refund colorNegative−$80.00
valueformatOptionscolorNegative=false
DateCellcellRenderer={DateCell}
Formats a date / string / epoch in mono — medium by default, with a fallback for empties.
BookedJun 24, 2026
Last visitMar 02, 2026
Follow-upJul 08, 2026
Not set fallback—
valueformatOptionsfallback
PercentCellcellRenderer={PercentCell} · showBar
A percentage in mono, optionally with a threshold bar — moss ≥70, amber ≥40, rust below.
Chair utilization92%
Rebooking rate58%
No-show rate31%
No bar showBar=false74%
valueshowBarcolorBarisPercentage
ActionsCellcellRenderer={ActionsCell}
A row menu — an icon Button that opens a DropdownMenu of per-row actions.
actions[]triggerLabel="Actions"destructiveseparator
Composes
StatusCell → StatusBadge
BadgeCell → Badge
BooleanCell
CurrencyCell
DateCell
PercentCell
ActionsCell → DropdownMenu
Each is a plain { value, … } component that plugs into a DataGrid column as cellRenderer + cellRendererParams. One columnDefs array drives either the AG Grid or TanStack adapter unchanged.
When to reach for it
Reach for a typed renderer instead of a raw string whenever a column carries a status, badge, money, date, ratio, flag, or row action — so formatting and the moss / amber / rust language stay consistent across every grid. Numbers and dates always render font-mono tabular-nums so columns align.
8.5 × 11 · Portrait