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:T1137,// title: Department budgets with expandable sub-rows "use client"; import { createColumnHelper, createExpandedRowModel, rowExpandingFeature, tableFeatures, useTable, } from "@tanstack/react-table"; import { ChevronRightIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/default/ui/button"; import { DataTable } from "@/registry/default/ui/data-table"; import { Progress } from "@/registry/default/ui/progress"; type Budget = { budget: number; name: string; spent: number; subRows?: Budget[]; }; const BUDGETS: Budget[] = [ { budget: 420_000, name: "Engineering", spent: 318_000, subRows: [ { budget: 180_000, name: "Platform", spent: 152_000 }, { budget: 140_000, name: "Web", spent: 96_000 }, { budget: 100_000, name: "Mobile", spent: 70_000 }, ], }, { budget: 160_000, name: "Marketing", spent: 141_000, subRows: [ { budget: 90_000, name: "Campaigns", spent: 88_500 }, { budget: 70_000, name: "Events", spent: 52_500 }, ], }, { budget: 95_000, name: "Design", spent: 61_000, subRows: [ { budget: 55_000, name: "Product design", spent: 38_000 }, { budget: 40_000, name: "Brand", spent: 23_000 }, ], }, ]; const currency = new Intl.NumberFormat("en-US", { currency: "USD", maximumFractionDigits: 0, notation: "compact", style: "currency", }); const features = tableFeatures({ expandedRowModel: createExpandedRowModel(), rowExpandingFeature, }); const column = createColumnHelper(); const columns = column.columns([ column.accessor("name", { cell: ({ row, getValue }) => (

{row.getCanExpand() ? ( ) : null} {getValue()}

), header: "Department", }), column.accessor("spent", { cell: ({ row }) => { const used = Math.round((row.original.spent / row.original.budget) * 100); return (

{used}%

); }, header: "Used", }), column.accessor("budget", { cell: ({ row }) => (

{currency.format(row.original.spent)} {" "} / {currency.format(row.original.budget)}

), header: () =>

Spent

, }), ]); export default function Particle() { const table = useTable({ columns, data: BUDGETS, features, getSubRows: (row) => row.subRows, initialState: { expanded: { "0": true } }, }); return (

FY26 budget

); } 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-6.tsx","content":"$61","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]