Examples
Currency trend cell
Use this when people need to scan both a number and its direction at the same time.
Live preview
$18,600
Build the React component
This cell is still just presentation: a formatted number plus a small trend icon driven by row data already in memory.
import { Minus, TrendingDown, TrendingUp } from "lucide-react"
type Trend = "up" | "down" | "flat"
const iconByTrend = {
up: TrendingUp,
down: TrendingDown,
flat: Minus,
} satisfies Record<Trend, typeof TrendingUp>
const toneByTrend = {
up: "text-emerald-600",
down: "text-red-500",
flat: "text-muted-foreground",
}
export function CurrencyTrendCell({
value,
trend,
}: {
value: number
trend: Trend
}) {
const Icon = iconByTrend[trend]
return (
<span className="inline-flex items-center gap-1.5 text-[12px] leading-4 font-medium">
<span>{"$" + value.toLocaleString()}</span>
<Icon aria-hidden="true" className={"size-3 " + toneByTrend[trend]} />
</span>
)
}Wire it into a column definition
Keep the column anchored to the numeric revenue field, then let the renderer enrich the visual treatment with trend context.
Even with a custom cell, the column still needs an accessor. In this example that is
accessorKey="revenue". That gives the table a stable field for sorting, filtering, and saved state, while the cell can still read extra data from row.original.{
id: "revenue",
header: "Revenue",
accessorKey: "revenue",
width: 160,
enableSorting: false,
enableFiltering: false,
cell: ({ row }) => (
<CurrencyTrendCell
value={row.original.revenue}
trend={row.original.revenueTrend}
/>
),
}Render it in a small table
The mini table keeps only the revenue cell custom so the table-level integration remains obvious.
const columns: DatatableColumn<CustomerRow>[] = [
{ id: "name", header: "Contact", accessorKey: "name" },
{ id: "company", header: "Company", accessorKey: "company" },
{
id: "revenue",
header: "Revenue",
accessorKey: "revenue",
cell: ({ row }) => (
<CurrencyTrendCell
value={row.original.revenue}
trend={row.original.revenueTrend}
/>
),
},
]
<Datatable tableKey="custom-cells" data={rows} columns={columns} getRowId={(row) => row.id} toolbar={false} />Mini table demo
Loading table preferences...