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:T4362,'use client' import { type ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, type PaginationState, type SortingState, useReactTable, } from '@tanstack/react-table' import { IconChevronDown, IconArrowUp, IconSparkles } from '@tabler/icons-react' import { useState } from 'react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { Frame, FrameFooter } from '@/components/ui/frame' import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious, } from '@/components/ui/pagination' import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from '@/components/ui/select' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' type Flight = { id: string flightCode: string destination: string departureTime: string arrivalTime: string terminal: string duration: string status: 'On Time' | 'Delayed' | 'Cancelled' | 'Boarding' gate: string } const getStatusColor = (status: Flight['status']) => { switch (status) { case 'On Time': return 'bg-emerald-500' case 'Delayed': return 'bg-amber-500' case 'Cancelled': return 'bg-red-500' case 'Boarding': return 'bg-blue-500' default: return 'bg-muted-foreground/64' } } const columns: ColumnDef[] = [ { cell: ({ row }) => ( row.toggleSelected(!!value)} /> ), enableSorting: false, header: ({ table }) => { const isAllSelected = table.getIsAllPageRowsSelected() const isSomeSelected = table.getIsSomePageRowsSelected() return ( table.toggleAllPageRowsSelected(!!value)} /> ) }, id: 'select', size: 28, }, { accessorKey: 'flightCode', cell: ({ row }) =>

{row.getValue('flightCode')}

, header: 'Flight', size: 80, }, { accessorKey: 'departureTime', cell: ({ row }) => { const isCancelled = row.original.status === 'Cancelled' const isDelayed = row.original.status === 'Delayed' return (

{row.original.departureTime}

{row.original.duration}

) }, header: 'Time', size: 220, }, { accessorKey: 'destination', cell: ({ row }) =>

{row.getValue('destination')}

, header: 'Destination', size: 180, }, { accessorKey: 'status', cell: ({ row }) => { const status = row.getValue('status') as Flight['status'] return ( ) }, header: 'Status', size: 120, }, { accessorKey: 'terminal', cell: ({ row }) => ( {row.getValue('terminal')} ), header: 'Terminal', size: 90, }, { accessorKey: 'gate', header: 'Gate', size: 80, }, ] export default function Demo() { const pageSize = 10 const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: pageSize, }) const [sorting, setSorting] = useState([ { desc: false, id: 'departureTime', }, ]) const table = useReactTable({ columns, data: flights, enableSortingRemoval: false, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onPaginationChange: setPagination, onSortingChange: setSorting, state: { pagination, sorting, }, }) return ( {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { const columnSize = header.column.getSize() return ( {header.isPlaceholder ? null : header.column.getCanSort() ? (

{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() header.column.getToggleSortingHandler()?.(e) } }} role="button" tabIndex={0} > {flexRender(header.column.columnDef.header, header.getContext())} {{ asc:

) : ( 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. )}

{/* Results range selector */}

Viewing

of {table.getRowCount()} results

{/* Pagination */} table.previousPage()} size="sm" variant="outline" /> } /> table.nextPage()} size="sm" variant="outline" /> } />

) } const flights: Flight[] = [ { arrivalTime: '11:45', departureTime: '08:30', destination: 'Los Angeles', duration: '5h 15m', flightCode: 'AA1234', gate: 'A12', id: '1', status: 'On Time', terminal: '1', }, { arrivalTime: '17:10', departureTime: '14:20', destination: 'San Francisco', duration: '4h 50m', flightCode: 'DL5678', gate: 'B24', id: '2', status: 'Delayed', terminal: '2', }, { arrivalTime: '13:30', departureTime: '10:15', destination: 'Miami', duration: '3h 15m', flightCode: 'UA9012', gate: 'C8', id: '3', status: 'On Time', terminal: '1', }, { arrivalTime: '18:20', departureTime: '16:45', destination: 'Seattle', duration: '2h 35m', flightCode: 'SW3456', gate: 'D15', id: '4', status: 'On Time', terminal: '3', }, { arrivalTime: '12:30', departureTime: '09:00', destination: 'Salt Lake City', duration: '5h 30m', flightCode: 'JB7890', gate: 'E3', id: '5', status: 'Cancelled', terminal: '2', }, { arrivalTime: '14:15', departureTime: '11:30', destination: 'Phoenix', duration: '2h 45m', flightCode: 'AS2345', gate: 'F7', id: '6', status: 'On Time', terminal: '1', }, { arrivalTime: '20:30', departureTime: '13:00', destination: 'Las Vegas', duration: '5h 30m', flightCode: 'HA6789', gate: 'G12', id: '7', status: 'Delayed', terminal: '2', }, { arrivalTime: '09:00', departureTime: '07:15', destination: 'Dallas', duration: '1h 45m', flightCode: 'FX0123', gate: 'H5', id: '8', status: 'Boarding', terminal: '1', }, { arrivalTime: '08:30', departureTime: '06:00', destination: 'Denver', duration: '2h 30m', flightCode: 'WN4567', gate: 'I9', id: '9', status: 'Boarding', terminal: '2', }, { arrivalTime: '15:20', departureTime: '12:45', destination: 'Portland', duration: '2h 35m', flightCode: 'B61234', gate: 'J14', id: '10', status: 'On Time', terminal: '3', }, { arrivalTime: '18:45', departureTime: '15:30', destination: 'Atlanta', duration: '3h 15m', flightCode: 'NK8901', gate: 'K6', id: '11', status: 'On Time', terminal: '1', }, { arrivalTime: '12:00', departureTime: '09:45', destination: 'Chicago', duration: '2h 15m', flightCode: 'F92345', gate: 'L11', id: '12', status: 'Delayed', terminal: '2', }, { arrivalTime: '14:15', departureTime: '11:00', destination: 'Boston', duration: '3h 15m', flightCode: 'SY6789', gate: 'M3', id: '13', status: 'On Time', terminal: '1', }, { arrivalTime: '16:45', departureTime: '13:30', destination: 'New York', duration: '3h 15m', flightCode: 'G40123', gate: 'N8', id: '14', status: 'On Time', terminal: '3', }, { arrivalTime: '11:20', departureTime: '08:00', destination: 'Washington', duration: '3h 20m', flightCode: 'YX5678', gate: 'O12', id: '15', status: 'Delayed', terminal: '2', }, { arrivalTime: '13:50', departureTime: '10:30', destination: 'Orlando', duration: '3h 20m', flightCode: '4U9012', gate: 'P5', id: '16', status: 'Delayed', terminal: '1', }, { arrivalTime: '16:30', departureTime: '14:00', destination: 'Houston', duration: '2h 30m', flightCode: 'QF3456', gate: 'Q9', id: '17', status: 'On Time', terminal: '3', }, { arrivalTime: '10:00', departureTime: '07:30', destination: 'Minneapolis', duration: '2h 30m', flightCode: 'LH7890', gate: 'R7', id: '18', status: 'Cancelled', terminal: '2', }, { arrivalTime: '19:30', departureTime: '16:15', destination: 'Detroit', duration: '3h 15m', flightCode: 'KL2345', gate: 'S4', id: '19', status: 'Cancelled', terminal: '1', }, { arrivalTime: '15:10', departureTime: '12:00', destination: 'Philadelphia', duration: '3h 10m', flightCode: 'AF6789', gate: 'T16', id: '20', status: 'On Time', terminal: '3', }, { arrivalTime: '12:25', departureTime: '09:15', destination: 'Charlotte', duration: '3h 10m', flightCode: 'BA0123', gate: 'U10', id: '21', status: 'On Time', terminal: '2', }, { arrivalTime: '18:00', departureTime: '15:45', destination: 'Nashville', duration: '2h 15m', flightCode: 'IB4567', gate: 'V8', id: '22', status: 'Delayed', terminal: '1', }, { arrivalTime: '14:00', departureTime: '11:45', destination: 'Austin', duration: '2h 15m', flightCode: 'EK8901', gate: 'W13', id: '23', status: 'Cancelled', terminal: '3', }, { arrivalTime: '16:40', departureTime: '13:15', destination: 'Tampa', duration: '3h 25m', flightCode: 'QR2345', gate: 'X6', id: '24', status: 'On Time', terminal: '2', }, { arrivalTime: '11:30', departureTime: '08:45', destination: 'Raleigh', duration: '2h 45m', flightCode: 'TK6789', gate: 'Y11', id: '25', status: 'On Time', terminal: '1', }, { arrivalTime: '12:45', departureTime: '10:00', destination: 'Indianapolis', duration: '2h 45m', flightCode: 'VS3456', gate: 'Z4', id: '26', status: 'On Time', terminal: '2', }, { arrivalTime: '20:00', departureTime: '17:30', destination: 'Kansas City', duration: '2h 30m', flightCode: 'LX7890', gate: 'A8', id: '27', status: 'Delayed', terminal: '3', }, { arrivalTime: '15:20', departureTime: '12:30', destination: 'Columbus', duration: '2h 50m', flightCode: 'OS1234', gate: 'B19', id: '28', status: 'On Time', terminal: '1', }, { arrivalTime: '20:15', departureTime: '18:00', destination: 'Milwaukee', duration: '2h 15m', flightCode: 'SN5678', gate: 'C22', id: '29', status: 'On Time', terminal: '2', }, { arrivalTime: '21:30', departureTime: '19:15', destination: 'Memphis', duration: '2h 15m', flightCode: 'TP9012', gate: 'D6', id: '30', status: 'On Time', terminal: '3', }, ] 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","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-badge.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-checkbox.json","https://www.spaceui.one/r/primitives-frame.json","https://www.spaceui.one/r/primitives-pagination.json","https://www.spaceui.one/r/primitives-select.json","https://www.spaceui.one/r/primitives-table.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/primitives/table/p-table-04/index.tsx","content":"$4e","type":"registry:ui","target":"components/spaceui/table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]