Table

const invoices = [
  { id: 'INV-1042', customer: 'Northwind Ltd', date: '3 Oct 2026', amount: 1240.5 },
  { id: 'INV-1043', customer: 'Fabrikam', date: '7 Oct 2026', amount: 380 },
  { id: 'INV-1044', customer: 'Contoso', date: '12 Oct 2026', amount: 9120.75 },
  { id: 'INV-1045', customer: 'Tailspin Toys', date: '19 Oct 2026', amount: 64 },
];

const gbp = (n: number) => new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(n);

<Table aria-label="Invoices">
  <TableCaption>Invoices issued in October 2026</TableCaption>
  <TableHeader>
    <TableRow><TableHead>Invoice</TableHead><TableHead>Customer</TableHead><TableHead>Date</TableHead><TableHead align="end">Amount</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((i) => (
      <TableRow key={i.id}><TableRowHeader>{i.id}</TableRowHeader><TableCell>{i.customer}</TableCell><TableCell>{i.date}</TableCell><TableCell align="end">{gbp(i.amount)}</TableCell></TableRow>
    ))}
  </TableBody>
  <TableFooter>
    <TableRow><TableRowHeader colSpan={3}>Total</TableRowHeader><TableCell align="end">{gbp(invoices.reduce((a, i) => a + i.amount, 0))}</TableCell></TableRow>
  </TableFooter>
</Table>

const gbp = (n: number) => new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(n);

function SortableExample() {
  const [sort, setSort] = useState<{ column: 'customer' | 'amount'; direction: SortDirection }>({ column: 'amount', direction: 'descending' });
  const rows = useMemo(() => [...invoices].sort((a, b) => {
    const d = sort.column === 'amount' ? a.amount - b.amount : a.customer.localeCompare(b.customer);
    return sort.direction === 'ascending' ? d : -d;
  }), [sort]);
  const toggle = (column: 'customer' | 'amount') => setSort((s) => ({ column, direction: s.column === column && s.direction === 'ascending' ? 'descending' : 'ascending' }));
  return (
    <Table aria-label="Invoices, sortable">
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead sortDirection={sort.column === 'customer' ? sort.direction : 'none'} onSort={() => toggle('customer')}>Customer</TableHead>
          <TableHead align="end" sortDirection={sort.column === 'amount' ? sort.direction : 'none'} onSort={() => toggle('amount')}>Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((i) => <TableRow key={i.id}><TableRowHeader>{i.id}</TableRowHeader><TableCell>{i.customer}</TableCell><TableCell align="end">{gbp(i.amount)}</TableCell></TableRow>)}
      </TableBody>
    </Table>
  );
}

<SortableExample />

const invoices = [
  { id: 'INV-1042', customer: 'Northwind Ltd', date: '3 Oct 2026', amount: 1240.5 },
  { id: 'INV-1043', customer: 'Fabrikam', date: '7 Oct 2026', amount: 380 },
  { id: 'INV-1044', customer: 'Contoso', date: '12 Oct 2026', amount: 9120.75 },
  { id: 'INV-1045', customer: 'Tailspin Toys', date: '19 Oct 2026', amount: 64 },
];

const gbp = (n: number) => new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(n);

const status = { 'INV-1042': ['Paid', 'success'], 'INV-1043': ['Overdue', 'danger'], 'INV-1044': ['Draft', 'neutral'], 'INV-1045': ['Paid', 'success'] } as const;

const emails: Record<string, string> = { 'Northwind Ltd': 'accounts@northwind.example', Fabrikam: 'billing@fabrikam.example', Contoso: 'ap@contoso.example', 'Tailspin Toys': 'finance@tailspin.example' };

<Table aria-label="Invoices with status">
  <TableHeader>
    <TableRow><TableHead frozen>Invoice</TableHead><TableHead>Customer</TableHead><TableHead>Status</TableHead><TableHead align="end">Amount</TableHead><TableHead><span className="sr-only">Actions</span></TableHead></TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((i) => (
      <TableRow key={i.id}>
        <TableRowHeader frozen>{i.id}</TableRowHeader>
        <TableCell className="min-w-[14rem]"><span className="block">{i.customer}</span><span className="block text-body-sm text-fg-secondary">{emails[i.customer]}</span></TableCell>
        <TableCell><Badge tone={status[i.id as keyof typeof status][1]}>{status[i.id as keyof typeof status][0]}</Badge></TableCell>
        <TableCell align="end">{gbp(i.amount)}</TableCell>
        <TableCell align="end" className="w-px">
          <MenuTrigger>
            <IconButton icon={Ellipsis} label={`More actions for ${i.id}`} variant="ghost" />
            <Menu><MenuItem id="view">View</MenuItem><MenuItem id="send">Send reminder</MenuItem></Menu>
          </MenuTrigger>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>