5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61:Td25,// title: Sortable invoices "use client"; import { createColumnHelper, createSortedRowModel, rowSortingFeature, sortFn_alphanumeric, sortFn_datetime, tableFeatures, useTable, } from "@tanstack/react-table"; import { Badge } from "@/registry/default/ui/badge"; import { DataTable, DataTableColumnHeader, } from "@/registry/default/ui/data-table"; type Invoice = { amount: number; customer: string; id: string; issued: Date; status: "paid" | "pending" | "overdue"; }; const INVOICES: Invoice[] = [ { amount: 1250, customer: "Northwind", id: "INV-1042", issued: new Date(2026, 9, 2), status: "paid", }, { amount: 480, customer: "Globex", id: "INV-1043", issued: new Date(2026, 9, 5), status: "pending", }, { amount: 3200, customer: "Initech", id: "INV-1044", issued: new Date(2026, 8, 21), status: "overdue", }, { amount: 760, customer: "Umbrella", id: "INV-1045", issued: new Date(2026, 9, 9), status: "paid", }, { amount: 1980, customer: "Hooli", id: "INV-1046", issued: new Date(2026, 9, 11), status: "pending", }, ]; const STATUS = { overdue: { label: "Overdue", variant: "destructive" }, paid: { label: "Paid", variant: "success" }, pending: { label: "Pending", variant: "warning" }, } as const; const currency = new Intl.NumberFormat("en-US", { currency: "USD", style: "currency", }); const dateFormat = new Intl.DateTimeFormat("en-US", { day: "numeric", month: "short", }); // Features, columns and data live at module scope so the table's models // aren't rebuilt on every render. const features = tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns: { alphanumeric: sortFn_alphanumeric, datetime: sortFn_datetime }, }); const column = createColumnHelper(); const columns = column.columns([ column.accessor("id", { cell: (info) => {info.getValue()}, header: ({ column }) => ( ), }), column.accessor("customer", { header: ({ column }) => ( ), }), column.accessor("issued", { cell: (info) => dateFormat.format(info.getValue()), header: ({ column }) => ( ), sortFn: "datetime", }), column.accessor("status", { cell: (info) => { const status = STATUS[info.getValue()]; return {status.label}; }, enableSorting: false, header: "Status", }), column.accessor("amount", { cell: (info) => (

{currency.format(info.getValue())}

), header: ({ column }) => (

), }), ]); export default function Particle() { const table = useTable({ columns, data: INVOICES, features, initialState: { sorting: [{ desc: true, id: "issued" }] }, }); return (

); } 5e:["$","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,["$","$L5f",null,{"namespace":"@cnippet","registryDependencies":["@cnippet/data-table","@cnippet/badge","@cnippet/button","@cnippet/menu","@cnippet/avatar","@cnippet/progress"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"registry/default/variants/v-data-table-1.tsx","content":"$61","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]