Examples
Progress cell
Use this when a numeric field needs faster visual scanning than plain text can provide.
Live preview
82
Build the React component
This is a pure presentation cell. It turns one numeric value into a compact bar plus label and stays very cheap to render.
export function ProgressCell({ value }: { value: number }) {
const tone = value >= 70 ? "bg-sky-500" : value >= 40 ? "bg-amber-500" : "bg-red-500"
return (
<span className="inline-flex items-center gap-1.5 text-[12px] leading-4 font-medium">
<span>{value}</span>
<span aria-hidden="true" className={"size-2 rounded-full " + tone} />
</span>
)
}Wire it into a column definition
Because the value is still just a number, the column contract stays extremely simple.
Even with a custom cell, the column still needs an accessor. In this example that is
accessorKey="health". 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: "health",
header: "Health",
accessorKey: "health",
width: 160,
enableSorting: false,
enableFiltering: false,
cell: ({ row }) => <ProgressCell value={row.original.health} />,
}Render it in a small table
The table demo shows the progress bar beside plain contact fields so the visual scan benefit is easy to feel.
const columns: DatatableColumn<CustomerRow>[] = [
{ id: "name", header: "Contact", accessorKey: "name" },
{ id: "company", header: "Company", accessorKey: "company" },
{
id: "health",
header: "Health",
accessorKey: "health",
cell: ({ row }) => <ProgressCell value={row.original.health} />,
},
]
<Datatable tableKey="custom-cells" data={rows} columns={columns} getRowId={(row) => row.id} toolbar={false} />Mini table demo
Loading table preferences...