Data Table Cell

GitHub

Date, currency, disabled-state, list, and ellipsis cell renderers for data tables.

Installation

bash
pnpm dlx shadcn@latest add @cs/data-table-cell

Usage

tsx
import { DataTableCellDate } from "@/components/cs/data-table-cell";
tsx
<DataTableCellDate value={new Date()} />

API Reference

DataTableCellDate

Formats a date value using the active next-intl locale.

Props

NameTypeDefaultDescription
classNamestring--
value *Date | string | undefined | null--

DataTableCellDisabled

Props

NameTypeDefaultDescription
disabled *boolean | null | undefined--
value *string--

DataTableCellCurrency

Props

NameTypeDefaultDescription
currencystring"EUR"-
value *number | undefined | null--

DataTableCellList

Props

NameTypeDefaultDescription
countnumber1-
items *{ name: string; color?: string }[]--

DataTableCellEllipsis

Renders text truncated with an ellipsis while showing the full value in a tooltip. Based on Stack Overflow.

Props

NameTypeDefaultDescription
classNamestring--
text *string | undefined | null--