4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Te9c,"use client"; import { useState } from "react"; import { IdCell, PersonCell, RelativeTimeCell, StatusCell } from "../cells/cells"; import { DemoFrame } from "../lib/demo-frame"; import { Segmented } from "../segmented/segmented"; import { easedColumns, Table, type TableDensity } from "./table"; type Invoice = { id: string; customer: string; status: "Paid" | "Due" | "Overdue" | "Draft"; amount: number; issued: number; }; // Fixed instant so server and client render the same relative times. const NOW = Date.UTC(2026, 9, 18, 12); const H = 3_600_000; const INVOICES: Invoice[] = [ { id: "INV-2041", customer: "Maya Okafor", status: "Paid", amount: 4280, issued: NOW - 2 * H }, { id: "INV-2040", customer: "Jonas Weber", status: "Due", amount: 1150.5, issued: NOW - 9 * H }, { id: "INV-2039", customer: "Priya Raman", status: "Overdue", amount: 12_600, issued: NOW - 26 * H }, { id: "INV-2038", customer: "Leo Martín", status: "Paid", amount: 860, issued: NOW - 50 * H }, { id: "INV-2037", customer: "Amara Diallo", status: "Draft", amount: 2340, issued: NOW - 74 * H }, { id: "INV-2036", customer: "Hana Sato", status: "Paid", amount: 18_920, issued: NOW - 98 * H }, { id: "INV-2035", customer: "Tomás Herrera", status: "Due", amount: 640.25, issued: NOW - 6 * 24 * H }, { id: "INV-2034", customer: "Ingrid Larsen", status: "Paid", amount: 3075, issued: NOW - 8 * 24 * H }, { id: "INV-2033", customer: "Kwame Mensah", status: "Overdue", amount: 5400, issued: NOW - 12 * 24 * H }, { id: "INV-2032", customer: "Sofia Rossi", status: "Paid", amount: 990, issued: NOW - 15 * 24 * H }, { id: "INV-2031", customer: "Ethan Brooks", status: "Paid", amount: 7210, issued: NOW - 21 * 24 * H }, ]; const TONE = { Paid: "success", Due: "info", Overdue: "warning", Draft: "neutral" } as const; const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2 }); const col = easedColumns(); const columns = col.columns([ col.accessor("id", { header: "Invoice", cell: (c) => , meta: { className: "@max-[36rem]:hidden" }, }), col.accessor("customer", { header: "Customer", cell: (c) => , meta: { emphasis: true, grow: true } }), col.accessor("status", { header: "Status", cell: (c) => {c.getValue()} }), col.accessor("amount", { header: "Amount", cell: (c) => money.format(c.getValue()), meta: { align: "end" } }), col.accessor("issued", { header: "Issued", cell: (c) => , meta: { align: "end", className: "@max-[26rem]:hidden" }, }), ]); const Rows = ({ gap }: { gap: number }) => ( ); export function TableDemo() { const [density, setDensity] = useState("dense"); return ( , "aria-label": "Dense rows" }, { value: "comfortable", icon: , "aria-label": "Comfortable rows" }, ]} /> } > r.id} density={density} className="min-h-0 flex-1" /> ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@eased","registryDependencies":["https://eased.dev/r/table.json","https://eased.dev/r/cells.json","https://eased.dev/r/segmented.json","https://eased.dev/r/eased-demo-frame.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/eased/table/table-demo.tsx","content":"$50","type":"registry:example","target":"@components/eased/table/table-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]