"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 "@/registry/default/ui/badge"; import { Checkbox } from "@/registry/default/ui/checkbox"; import { Frame } from "@/registry/default/ui/frame"; import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "@/registry/default/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 Particle() { 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}

); }

Table 3

Instalação

Dependências

Registry dependencies