Table

Displays tabular data with composable primitives.

Recent invoices
Customer	Amount	Issued	Status
Acme Analytics	$4,500.00	Jan 9, 2025	Paid
Northwind Security	$12,240.00	Jan 12, 2025	Processing
Lighthouse Labs	$2,980.00	Jan 14, 2025	Overdue
Showing all 3 invoices

import { Badge } from "@smartacteam/ambient-web/badge";
import { Table } from "@smartacteam/ambient-web/table";

const invoices = [
  {
    id: "inv-001",
    customer: "Acme Analytics",
    amount: "$4,500.00",
    issued: "Jan 9, 2025",
    status: "Paid",
    statusVariant: "success",
  },
  {
    id: "inv-002",
    customer: "Northwind Security",
    amount: "$12,240.00",
    issued: "Jan 12, 2025",
    status: "Processing",
    statusVariant: "default",
  },
  {
    id: "inv-003",
    customer: "Lighthouse Labs",
    amount: "$2,980.00",
    issued: "Jan 14, 2025",
    status: "Overdue",
    statusVariant: "error",
  },
] as const;

export function TableDemo() {
  return (
    <Table.Root>
      <Table.Caption>Recent invoices</Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head>Customer</Table.Head>
          <Table.Head align="right">Amount</Table.Head>
          <Table.Head>Issued</Table.Head>
          <Table.Head>Status</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {invoices.map((invoice) => (
          <Table.Row key={invoice.id} interactive>
            <Table.Cell variant="header">{invoice.customer}</Table.Cell>
            <Table.Cell align="right">{invoice.amount}</Table.Cell>
            <Table.Cell>{invoice.issued}</Table.Cell>
            <Table.Cell>
              <Badge color={invoice.statusVariant}>{invoice.status}</Badge>
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.Cell colSpan={5} className="text-sm text-text-secondary">
            Showing all {invoices.length} invoices
          </Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  );
}

Usage

import { Table } from "@smartacteam/ambient-web/table";

<Table.Root>
  <Table.Caption>A list of your recent invoices.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head className="w-25">Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head>Method</Table.Head>
      <Table.Head className="text-right">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell className="font-medium">INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
      <Table.Cell className="text-right">$250.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>