Table

A styled, responsive table primitive with default and card variants. Ships Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell and TableCaption — semantic <table> elements with hover and selected row states, a horizontal-scroll container, and a rounded 'card' layout. Dependency-free (just cn). Compose it for project lists, invoices, inventory, API metrics, server usage, subscriptions or pricing comparisons.

by Cnippet

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/cnippet-table";

import type React from "react";

const badgeStyles: Record<string, string> = {
  outline: "text-foreground",
  secondary: "border-transparent bg-secondary text-secondary-foreground",
  default: "border-transparent bg-primary text-primary-foreground",
  success:
    "border-transparent bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
  warning:
    "border-transparent bg-amber-500/15 text-amber-600 dark:text-amber-400",
  destructive: "border-transparent bg-destructive/15 text-destructive",
  info: "border-transparent bg-blue-500/15 text-blue-600 dark:text-blue-400",
};

function Badge({
  variant = "outline",
  className = "",
  children,
}: {
  variant?: string;
  className?: string;
  children?: React.ReactNode;
}): React.ReactElement {
  return (
    <span
      className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-md border px-2 py-0.5 font-medium text-xs [&_svg]:size-3 ${badgeStyles[variant] ?? ""} ${className}`}
    >
      {children}
    </span>
  );
}


const orders = [
  {
    amount: "$1,999.00",
    avatar:
      "https://cdn.21st.dev/assets/mirror/f1/f196c8f46bd52c8e1ccb3d53dbe00ea28047a7d07ad42015b139b9b7a21ddcdc.jpg",
    customer: "Olivia Martin",
    date: "Feb 1, 2025",
    email: "olivia@example.com",
    id: "#3210",
    status: "Paid",
    statusVariant: "success" as const,
  },
  {
    amount: "$39.00",
    avatar:
      "https://cdn.21st.dev/assets/mirror/7a/7a441860d9b014f1d071006b567655c4fa0d3f45a693dcaa6a765ccd5953f7f0.jpg",
    customer: "Jackson Lee",
    date: "Jan 28, 2025",
    email: "jackson@example.com",
    id: "#3209",
    status: "Pending",
    statusVariant: "warning" as const,
  },
  {
    amount: "$299.00",
    avatar:
      "https://cdn.21st.dev/assets/mirror/cf/cf727f6ea4acac46e0f96d1d217b8a0d72a669d9c1a2c2721bfd478a07c1d810.jpg",
    customer: "Isabella Nguyen",
    date: "Jan 25, 2025",
    email: "isabella@example.com",
    id: "#3208",
    status: "Paid",
    statusVariant: "success" as const,
  },
  {
    amount: "$99.00",
    avatar:
      "https://cdn.21st.dev/assets/mirror/d1/d1ec5561531e85766088af70f51f264f15e6e4fd33fd690f1149ece92f5fcc1a.jpg",
    customer: "William Kim",
    date: "Jan 22, 2025",
    email: "will@example.com",
    id: "#3207",
    status: "Refunded",
    statusVariant: "info" as const,
  },
  {
    amount: "$2,500.00",
    avatar:
      "https://cdn.21st.dev/assets/mirror/30/3046299adaf36760e400c8c71d6f738d8dbec09de899c2b15eba88fcaa8d4ef0.jpg",
    customer: "Sofia Davis",
    date: "Jan 18, 2025",
    email: "sofia@example.com",
    id: "#3206",
    status: "Paid",
    statusVariant: "success" as const,
  },
];

export default function TableUsers() {
  return (
    <div className="mx-auto flex w-full max-w-2xl flex-col">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Order</TableHead>
            <TableHead>Customer</TableHead>
            <TableHead>Status</TableHead>
            <TableHead className="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {orders.map((order) => (
            <TableRow key={order.id}>
              <TableCell className="font-mono text-sm">{order.id}</TableCell>
              <TableCell>
                <div className="flex items-center gap-3">
                  <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground text-xs">
                    {order.customer
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                  </span>
                  <div className="flex flex-col">
                    <span className="font-medium text-sm">
                      {order.customer}
                    </span>
                    <span className="text-muted-foreground text-xs">
                      {order.date}
                    </span>
                  </div>
                </div>
              </TableCell>
              <TableCell>
                <Badge size="sm" variant={order.statusVariant}>
                  {order.status}
                </Badge>
              </TableCell>
              <TableCell className="text-right font-medium text-sm">
                {order.amount}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}