4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1827,'use client' import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table' import type React from 'react' import { useMemo, useState } from 'react' import { Badge } from '@/components/ui/badge' import { Checkbox } from '@/components/ui/checkbox' import { Frame } from '@/components/ui/frame' import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table' type Project = { id: string project: string status: 'Paid' | 'Unpaid' | 'Pending' | 'Failed' team: string budget: number } const data: Project[] = [ { budget: 12500, id: '1', project: 'Website Redesign', status: 'Paid', team: 'Frontend Team', }, { budget: 8750, id: '2', project: 'Mobile App', status: 'Unpaid', team: 'Mobile Team', }, { budget: 5200, id: '3', project: 'API Integration', status: 'Pending', team: 'Backend Team', }, { budget: 3800, id: '4', project: 'Database Migration', status: 'Paid', team: 'DevOps Team', }, { budget: 7200, id: '5', project: 'User Dashboard', status: 'Paid', team: 'UX Team', }, { budget: 2100, id: '6', project: 'Security Audit', status: 'Failed', team: 'Security Team', }, ] const getStatusColor = (status: Project['status']) => { switch (status) { case 'Paid': return 'bg-emerald-500' case 'Unpaid': return 'bg-muted-foreground/64' case 'Pending': return 'bg-amber-500' case 'Failed': return 'bg-red-500' default: return 'bg-muted-foreground/64' } } const getColumns = (): ColumnDef[] => [ { cell: ({ row }) => { const toggleHandler = row.getToggleSelectedHandler() return ( { // Create a synthetic event for the handler const syntheticEvent = { target: { checked: !!value }, } as unknown as React.ChangeEvent toggleHandler(syntheticEvent) }} /> ) }, enableSorting: false, header: ({ table }) => { const isAllSelected = table.getIsAllPageRowsSelected() const isSomeSelected = table.getIsSomePageRowsSelected() const toggleHandler = table.getToggleAllPageRowsSelectedHandler() return ( { // Create a synthetic event for the handler const syntheticEvent = { target: { checked: !!value }, } as unknown as React.ChangeEvent toggleHandler(syntheticEvent) }} /> ) }, id: 'select', }, { accessorKey: 'project', cell: ({ row }) =>

{row.getValue('project')}

, header: 'Project', }, { accessorKey: 'status', cell: ({ row }) => { const status = row.getValue('status') as Project['status'] return ( ) }, header: 'Status', }, { accessorKey: 'team', header: 'Team', }, { accessorKey: 'budget', cell: ({ row }) => { const amount = Number.parseFloat(row.getValue('budget')) const formatted = new Intl.NumberFormat('en-US', { currency: 'USD', maximumFractionDigits: 0, minimumFractionDigits: 0, style: 'currency', }).format(amount) return

{formatted}

}, header: () =>

Budget

, }, ] export default function Demo() { const [tableData] = useState(data) const [rowSelection, setRowSelection] = useState({}) const columns = useMemo(() => getColumns(), []) const table = useReactTable({ columns, data: tableData, enableRowSelection: true, getCoreRowModel: getCoreRowModel(), onRowSelectionChange: setRowSelection, state: { rowSelection, }, }) const totalBudget = tableData.reduce((sum, project) => sum + project.budget, 0) const formattedTotal = new Intl.NumberFormat('en-US', { currency: 'USD', maximumFractionDigits: 0, minimumFractionDigits: 0, style: 'currency', }).format(totalBudget) return ( {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} ) })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( No results. )} Total Budget {formattedTotal}

) } 4b:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/primitives-badge.json","https://www.spaceui.one/r/primitives-checkbox.json","https://www.spaceui.one/r/primitives-frame.json","https://www.spaceui.one/r/primitives-table.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/primitives/table/p-table-03/index.tsx","content":"$4e","type":"registry:ui","target":"components/spaceui/table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]