Data Table Cells

Overview

Every Cell* component receives the exact same fixed shape — CellRenderProps<Row>: { row, rowIndex, value, formatted, column, tabIndex, loading }. There's no per-cell custom-props channel. Richer cell types get their configuration by having the column's accessor return a shaped value object — each cell normalizes that shape at the top of its render (a plain string/number/boolean value is always accepted as a fallback too).

{
  field: 'amount',
  accessor: (row) => ({ amount: row.total, currency: 'USD' }), // shaped value, matches CellAmountValue
  cell: CellAmount,
}

When loading is true, every cell renders its own shape-matched Skeleton rather than a generic placeholder box.

Import

import { CellText } from '@unflowio/ui/components/CellText';
// ...same pattern for every Cell* below

CellText

Primary + optional secondary line — the default text cell, and the composition base a few other cells (Payment Method) reuse.

CellCheckOption

A checkbox/switch/radio for a boolean (or tri-state, checkbox-only) data field — distinct from DataTable's row-selection column. Omit onToggle for a read-only display.

CellActions

Row-level actions — 'menu' (default) collapses behind a kebab trigger; 'inline' spreads each out as its own icon button.

CellTags

Categorical chips with "+N" overflow.

CellAvatar

A single avatar, avatar + name, or a group of avatars — whichever the value asks for. A plain string value is treated as name.

CellProgress

A thin wrapper over Progress — always rendered as a linear bar (the circular type isn't exposed here; this cell is one fixed layout).

CellAmount

A formatted monetary value (via Intl.NumberFormat) with an optional delta chip and tooltip.

CellPaymentMethod

A card-brand icon (reuses the same brand→icon lookup CardInput uses) + label/subtitle.

CellReviews

A read-only Rating plus an optional review count.

CellDate

A formatted date, or a date range when endDate is provided. Display-only — editing isn't implemented yet (it will reuse the existing DatePicker family when it lands).

CellDescription

Long-form text, clamped to a fixed number of lines with a click-to-expand popover.

CellFiles

A file/attachment list — icon-type mapping (shared with Upload) + filename + size + download action, collapsing into overflow for multiple files, with an async "uploading" sub-state.

CellHeader

Not a data cell — the composed header-cell content (checkbox + startIcon + label + sort indicator + info tooltip + count badge), meant to be mounted as a dumb TableHead's children rather than baked into the primitive itself:

<TableHead>
  <CellHeader
    label="Amount"
    sort={{ direction: sortDirection, onToggle: handleSort }}
    description="Total invoice amount, including tax"
  />
</TableHead>

DataTable already renders this for every column header automatically — you'd reach for CellHeader directly only when building a fully custom toolbar/header outside DataTable.