Aspekt UI

Table is used to scan, compare, and sort structured data.

Recent invoices

INV-2420	Signal & Co.	Enterprise	Overdue	Jun 16	$3,420.00
INV-2418	Northstar Labs	Scale	Paid	Jun 12	$1,280.00
INV-2421	Fieldstone Studio	Team	Paid	Jun 18	$780.00
INV-2419	Aperture Works	Team	Pending	Jun 14	$640.00

tsx

import { Table, type TableColumnDef } from "@/components/aspekt/table";

type Invoice = {  customer: string;  status: "Paid" | "Pending" | "Overdue";  total: number;}; const columns = [  { accessorKey: "customer", header: "Customer" },  { accessorKey: "status", header: "Status" },  {    accessorKey: "total",    header: "Total",    cell: ({ getValue }) =>      Intl.NumberFormat("en", {        style: "currency",        currency: "USD",      }).format(getValue<number>()),  },] satisfies TableColumnDef<Invoice>[]; <Table  columns={columns}  data={invoices}  caption="Recent invoices"  striped/>