Data Table Cell Renderers

data-table-filters/data-table-cell

FreeBlock

Cell renderer system with 12 types: text, code, badge, boolean, star, number, status-code, level-indicator, timestamp, heatmap, bar, and gauge.

Install it

npx shadcn@latest add https://logs.run/r/data-table-cell.json

Source

src/components/data-table/data-table-cell/index.tsxlogs.run/r/data-table-cell.json

1export { DataTableCellText } from "./data-table-cell-text";
2export { DataTableCellCode } from "./data-table-cell-code";
3export { DataTableCellNumber } from "./data-table-cell-number";
4export { DataTableCellBar } from "./data-table-cell-bar";
5export { DataTableCellHeatmap } from "./data-table-cell-heatmap";
6export { DataTableCellGauge } from "./data-table-cell-gauge";
7export { DataTableCellTimestamp } from "./data-table-cell-timestamp";
8export { DataTableCellBadge } from "./data-table-cell-badge";
9export { DataTableCellBoolean } from "./data-table-cell-boolean";
10export { DataTableCellStar } from "./data-table-cell-star";
11export { DataTableCellStatusCode } from "./data-table-cell-status-code";
12export { DataTableCellLevelIndicator } from "./data-table-cell-level-indicator";

What it pulls in

npm packages

lucide-react
date-fns
@date-fns/utc
sonner

Other registry items

https://data-table.openstatus.dev/r/data-table.json
tooltip
hover-card

Files it writes

src/components/data-table/data-table-cell/index.tsx
src/components/data-table/data-table-cell/data-table-cell-text.tsx
src/components/data-table/data-table-cell/data-table-cell-code.tsx
src/components/data-table/data-table-cell/data-table-cell-badge.tsx
src/components/data-table/data-table-cell/data-table-cell-boolean.tsx
src/components/data-table/data-table-cell/data-table-cell-star.tsx
src/components/data-table/data-table-cell/data-table-cell-number.tsx
src/components/data-table/data-table-cell/data-table-cell-status-code.tsx
src/components/data-table/data-table-cell/data-table-cell-level-indicator.tsx
src/components/data-table/data-table-cell/data-table-cell-timestamp.tsx
src/components/data-table/data-table-cell/data-table-cell-heatmap.tsx
src/components/data-table/data-table-cell/data-table-cell-bar.tsx
src/components/data-table/data-table-cell/data-table-cell-gauge.tsx
src/lib/colors.ts
src/components/custom/text-with-tooltip.tsx
src/components/data-table/data-table-infinite/hover-card-timestamp.tsx
src/hooks/use-copy-to-clipboard.ts

More from data-table-filters

All 11 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Data Table with Filtersdata-table	data-table-filters	Blocks	Free	17 deps · 53 files
Data Table Drizzle ORM Helpersdata-table-drizzle	data-table-filters	Blocks	Free	2 deps · 7 files
Data Table Filter Command Palettedata-table-filter-command	data-table-filters	Blocks	Free	2 deps · 2 files
Data Table AI Filter Command Palettedata-table-filter-command-ai	data-table-filters	Blocks	Free	6 deps · 11 files
Data Table MCP Serverdata-table-mcp	data-table-filters	Blocks	Free	2 deps · 5 files
Data Table nuqs Store Adapterdata-table-nuqs	data-table-filters	Blocks	Free	1 dep · 4 files
Data Table Query Layerdata-table-query	data-table-filters	Blocks	Free	3 deps · 3 files
Data Table Schema Systemdata-table-schema	data-table-filters	Blocks	Free	1 dep · 13 files