Invoice table on TanStack Table: sortable columns with aria-sort, search, row selection with a bulk bar, a column menu, pagination and an empty state that offers to clear the search. Light and dark. Part of the Layro System: layro.vercel.app
import * as React from "react";
import { Button, DataTable, type ColumnDef } from "@/components/ui/data-table-bulk-actions";
import { Download, Plus } from "lucide-react";
/* Northwind Studio's invoices: 23 rows across seven customers. Sort a
column, search "vela", select rows for the bulk bar, hide a column, or
search for something that is not there to see the empty state. */
type Invoice = { number: string; customer: string; date: string; amount: number; status: "paid" | "open" | "failed" };
const CUSTOMERS = ["Northwind Studio", "Vela Labs", "Tallyworks", "Harbor & Co", "Juniper Health", "Ostrom Legal", "Kite Robotics"];
const STATUS: Invoice["status"][] = ["paid", "paid", "open", "paid", "failed", "paid", "open"];
const INVOICES: Invoice[] = Array.from({ length: 23 }, (_, i) => ({
number: `INV-2026-${String(914 - i).padStart(4, "0")}`,
customer: CUSTOMERS[i % CUSTOMERS.length],
date: `${String(28 - (i % 27)).padStart(2, "0")} Sep 2026`,
amount: [8900, 24900, 2900, 10100, 8900, 49900, 17800][i % 7],
status: STATUS[i % STATUS.length],
}));
const money = (c: number) => `$${(c / 100).toLocaleString("en-US", { minimumFractionDigits: 2 })}`;
const TONE = {
paid: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-400",
open: "bg-amber-500/15 text-amber-800 dark:text-amber-300",
failed: "bg-red-500/10 text-red-700 dark:text-red-400",
};
const COLUMNS: ColumnDef<Invoice, any>[] = [
{ accessorKey: "number", header: "Invoice", cell: ({ getValue }) => <span className="font-medium tabular-nums">{getValue<string>()}</span> },
{ accessorKey: "customer", header: "Customer" },
{ accessorKey: "date", header: "Date", meta: { label: "Date" } },
{ accessorKey: "amount", header: "Amount", meta: { align: "right" }, cell: ({ getValue }) => <span className="tabular-nums">{money(getValue<number>())}</span> },
{
accessorKey: "status",
header: "Status",
cell: ({ getValue }) => {
const s = getValue<Invoice["status"]>();
return (
<span className={`inline-flex h-[22px] items-center gap-1.5 rounded-full px-2 text-[11.5px] font-medium ${TONE[s]}`}>
<span aria-hidden className="size-1.5 rounded-full bg-current" />
{s[0].toUpperCase() + s.slice(1)}
</span>
);
},
},
];
export default function DataTableDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-[860px] min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-5 ring-1 ring-border sm:p-6">
<div className="mb-4 flex flex-wrap items-end justify-between gap-3">
<div>
<h2 className="text-[18px] font-semibold tracking-[-0.01em]">Invoices</h2>
<p className="mt-1 text-[13px] text-muted-foreground">September 2026 · 23 invoices from 7 customers</p>
</div>
<Button><Plus /> New invoice</Button>
</div>
<DataTable
label="Invoices"
data={INVOICES}
columns={COLUMNS}
searchPlaceholder="Search invoices"
selectable
columnToggle
pageSize={7}
getRowId={(r) => r.number}
bulkActions={(rows) => (
<Button variant="outline"><Download /> Export {rows.length}</Button>
)}
/>
</div>
</div>
);
}