import { DataTable } from "@/components/email/data-table";
import { defaultTheme } from "@/components/email/theme-default";
export function DataTableDemo() {
return (
<DataTable
columns={[
{ header: "Name", key: "name" },
{ align: "right", header: "Status", key: "status" },
]}
rows={[
{ name: "Ada", status: "Active" },
{ name: "Linus", status: "Pending" },
]}
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/data-table
Usage
import { DataTable } from "@/components/email/data-table";<DataTable
columns={[
{ header: "Name", key: "name" },
{ header: "Status", key: "status", align: "right" },
]}
rows={[
{ name: "Ada", status: "Active" },
{ name: "Linus", status: "Pending" },
]}
/>Examples
Basic data table
default
import { DataTable } from "@/components/email/data-table";
export function DataTableColumnsCustomRowsCustomExampleDemo() {
return (
<DataTable
columns={[
{ header: "Name", key: "name" },
{ align: "right", header: "Status", key: "status" },
]}
rows={[
{ name: "Ada", status: "Active" },
{ name: "Linus", status: "Pending" },
]}
/>
);
}Data table with 4 columns
default
import { DataTable } from "@/components/email/data-table";
export function DataTableVariantFourColumnsExampleDemo() {
return <DataTable variant="four-columns" />;
}Data table with change indicator pills
default
import { DataTable } from "@/components/email/data-table";
export function DataTableVariantChangeIndicatorsExampleDemo() {
return <DataTable variant="change-indicators" />;
}Data table with edit button
default
import { DataTable } from "@/components/email/data-table";
export function DataTableVariantEditActionsExampleDemo() {
return <DataTable variant="edit-actions" />;
}Data table with logos and action links
default
import { DataTable } from "@/components/email/data-table";
export function DataTableVariantLogoActionsExampleDemo() {
return <DataTable variant="logo-actions" />;
}Data table with pills
default
import { DataTable } from "@/components/email/data-table";
export function DataTableVariantStatusPillsExampleDemo() {
return <DataTable variant="status-pills" />;
}Data table with progress bar
default
import { DataTable } from "@/components/email/data-table";
export function DataTableVariantProgressExampleDemo() {
return <DataTable variant="progress" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
variant | "basic" | "four-columns" | "change-indicators" | "edit-actions" | "logo-actions" | "status-pills" | "progress" | "basic" | Selects one of the original data-table treatments. |
columns | Array<{ header: string; key?: keyof Row; align?: "left" | "center" | "right"; width?: string; cell?: (row: Row, index: number) => ReactNode }> | Required when variant="basic" | Defines generic table columns and custom cells. |
headers | string[] | Built-in headers for specialized variants | Overrides the specialized variant's header labels. |
rows | Row[] | string[][] | Array<{ change: string; direction: "down" | "up"; name: string; value: string }> | Array<{ editHref?: string; name: string; role: string }> | Array<{ actionHref?: string; actionLabel?: string; logoUrl?: string; name: string }> | Array<{ name: string; status: string; statusVariant: "active" | "cancelled" | "draft" | "pending" }> | Array<{ label: string; progress: number; value: string }> | Built-in rows for specialized variants | Supplies rows using the selected variant's shape. |
DataTableProps is a discriminated union, so TypeScript narrows rows and the
other available props from the selected variant.