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:T4a59,"use client"; import { type ColumnDef, columnSizingFeature, columnVisibilityFeature, createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_text, tableFeatures, useTable, } from "@tanstack/react-table"; import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react"; import { cn } from "@/registry/default/lib/utils"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { Checkbox } from "@/registry/default/ui/checkbox"; import { Frame, FrameFooter } from "@/registry/default/ui/frame"; import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious, } from "@/registry/default/ui/pagination"; import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue, } from "@/registry/default/ui/select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/registry/default/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 features = tableFeatures({ columnSizingFeature, columnVisibilityFeature, rowPaginationFeature, paginatedRowModel: createPaginatedRowModel(), rowSelectionFeature, rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text, }, }); 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 Particle() { const pageSize = 10; const table = useTable( { columns, data: flights, enableSortingRemoval: false, features, initialState: { pagination: { pageIndex: 0, pageSize, }, sorting: [ { desc: false, id: "departureTime", }, ], }, }, (state) => ({ pagination: state.pagination, rowSelection: state.rowSelection, sorting: state.sorting, }), ); return ( {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { const columnSize = header.column.getSize(); const sort = header.column.getIsSorted(); 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", }, ]; 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":[["$","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@coss","registryDependencies":["@coss/badge","@coss/button","@coss/checkbox","@coss/frame","@coss/pagination","@coss/select","@coss/table"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/particles/p-table-4.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]