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:T63a7,"use client" import * as React from "react" import { sortFn_basic, sortFn_datetime, columnVisibilityFeature, type ColumnDef, type ColumnFiltersState, type SortingState, flexRender, tableFeatures, useTable, createSortedRowModel, rowSortingFeature, columnFilteringFeature, createFilteredRowModel, createPaginatedRowModel, rowPaginationFeature, rowSelectionFeature, } from "@tanstack/react-table" const TABLE_FEATURES = tableFeatures({ columnVisibilityFeature, rowSortingFeature, columnFilteringFeature, rowPaginationFeature, rowSelectionFeature, sortedRowModel: createSortedRowModel(), filteredRowModel: createFilteredRowModel(), paginatedRowModel: createPaginatedRowModel(), sortFns: { datetime: sortFn_datetime, basic: sortFn_basic, }, }) import { toast } from "sonner" import { cn } from "@/lib/utils" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Toaster } from "@/components/ui/sonner" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { IconPlaceholder } from "@/components/icons/icon-placeholder" type PaymentStatus = "Paid" | "Pending" | "Overdue" | "Refunded" type Invoice = { id: string client: string initials: string avatar: string project: string amount: number method: string due: string status: PaymentStatus } const statusConfig: Record< PaymentStatus, { variant: "default" | "secondary" | "destructive" | "outline"; dot: string } > = { Paid: { variant: "default", dot: "bg-primary-foreground" }, Pending: { variant: "secondary", dot: "bg-muted-foreground" }, Overdue: { variant: "destructive", dot: "bg-destructive" }, Refunded: { variant: "outline", dot: "bg-muted-foreground" }, } const invoices: Invoice[] = [ { id: "INV-0041", client: "Miriam Okafor", initials: "MO", avatar: "https://i.pravatar.cc/80?img=1", project: "Brand Refresh", amount: 4200, method: "Wire Transfer", due: "2026-06-30", status: "Pending", }, { id: "INV-0040", client: "Theo Hartmann", initials: "TH", avatar: "https://i.pravatar.cc/80?img=12", project: "API Integration", amount: 1850, method: "Credit Card", due: "2026-06-15", status: "Paid", }, { id: "INV-0039", client: "Suki Nakamura", initials: "SN", avatar: "https://i.pravatar.cc/80?img=5", project: "Dashboard UI", amount: 6500, method: "ACH", due: "2026-06-01", status: "Overdue", }, { id: "INV-0038", client: "Elias Ferreira", initials: "EF", avatar: "https://i.pravatar.cc/80?img=3", project: "Mobile App MVP", amount: 9000, method: "Wire Transfer", due: "2026-05-28", status: "Paid", }, { id: "INV-0037", client: "Priya Menon", initials: "PM", avatar: "https://i.pravatar.cc/80?img=9", project: "SEO Audit", amount: 780, method: "Credit Card", due: "2026-05-10", status: "Refunded", }, { id: "INV-0036", client: "Dmitri Volkov", initials: "DV", avatar: "https://i.pravatar.cc/80?img=11", project: "Data Pipeline", amount: 3350, method: "ACH", due: "2026-04-25", status: "Paid", }, { id: "INV-0035", client: "Amara Diallo", initials: "AD", avatar: "https://i.pravatar.cc/80?img=16", project: "Design System", amount: 5400, method: "Wire Transfer", due: "2026-06-22", status: "Pending", }, { id: "INV-0034", client: "Noah Bergström", initials: "NB", avatar: "https://i.pravatar.cc/80?img=14", project: "Marketing Site", amount: 2100, method: "Credit Card", due: "2026-04-18", status: "Paid", }, { id: "INV-0033", client: "Lucia Romano", initials: "LR", avatar: "https://i.pravatar.cc/80?img=20", project: "Onboarding Flow", amount: 3950, method: "ACH", due: "2026-05-31", status: "Overdue", }, { id: "INV-0032", client: "Kwame Mensah", initials: "KM", avatar: "https://i.pravatar.cc/80?img=15", project: "Analytics Setup", amount: 1280, method: "Credit Card", due: "2026-04-09", status: "Paid", }, { id: "INV-0031", client: "Ingrid Larsen", initials: "IL", avatar: "https://i.pravatar.cc/80?img=24", project: "Accessibility Pass", amount: 2650, method: "Wire Transfer", due: "2026-06-12", status: "Pending", }, { id: "INV-0030", client: "Mateo Castillo", initials: "MC", avatar: "https://i.pravatar.cc/80?img=33", project: "Checkout Rebuild", amount: 7300, method: "ACH", due: "2026-03-30", status: "Refunded", }, { id: "INV-0029", client: "Yuki Tanaka", initials: "YT", avatar: "https://i.pravatar.cc/80?img=26", project: "Email Templates", amount: 940, method: "Credit Card", due: "2026-03-22", status: "Paid", }, { id: "INV-0028", client: "Fatima Zahra", initials: "FZ", avatar: "https://i.pravatar.cc/80?img=44", project: "Localization", amount: 4880, method: "Wire Transfer", due: "2026-05-19", status: "Overdue", }, { id: "INV-0027", client: "Oscar Lindqvist", initials: "OL", avatar: "https://i.pravatar.cc/80?img=51", project: "CMS Migration", amount: 6150, method: "ACH", due: "2026-06-05", status: "Pending", }, { id: "INV-0026", client: "Hana Novak", initials: "HN", avatar: "https://i.pravatar.cc/80?img=45", project: "Component Audit", amount: 1720, method: "Credit Card", due: "2026-03-14", status: "Paid", }, { id: "INV-0025", client: "Bilal Haddad", initials: "BH", avatar: "https://i.pravatar.cc/80?img=59", project: "Search Revamp", amount: 5230, method: "Wire Transfer", due: "2026-05-02", status: "Overdue", }, { id: "INV-0024", client: "Sienna Walsh", initials: "SW", avatar: "https://i.pravatar.cc/80?img=32", project: "Pricing Page", amount: 1360, method: "Credit Card", due: "2026-02-26", status: "Paid", }, ] const fmt = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, }) const dateFmt = new Intl.DateTimeFormat("en-US", { month: "short", day: "2-digit", year: "numeric", }) function formatDate(value: string) { const parsed = new Date(value) return Number.isNaN(parsed.getTime()) ? value : dateFmt.format(parsed) } const outstanding = invoices .filter((i) => i.status === "Pending" || i.status === "Overdue") .reduce((sum, i) => sum + i.amount, 0) function SortIcon({ sorted }: { sorted: false | "asc" | "desc" }) { if (sorted === "asc") return ( ) if (sorted === "desc") return ( ) return ( ) } const headLabel = "text-xs font-semibold tracking-wider text-muted-foreground uppercase" const sortButton = "-mx-1 inline-flex items-center gap-1 rounded-md px-1 text-xs font-semibold tracking-wider text-muted-foreground uppercase transition-colors hover:text-foreground" const columns: ColumnDef[] = [ { id: "select", enableSorting: false, enableHiding: false, header: ({ table }) => ( table.toggleAllPageRowsSelected(checked === true) } aria-label="Select all invoices on this page" /> ), cell: ({ row }) => ( row.toggleSelected(checked === true)} aria-label={`Select ${row.original.id}`} /> ), }, { accessorKey: "id", header: () => Invoice, cell: ({ row }) => ( {row.original.id} ), }, { accessorKey: "client", // A column with no `filterFn` does not filter: the value round-trips // through `getFilterValue()`, so the input looks live while the rows never // change. Declared explicitly, as the other filtering tables here do. filterFn: (row, _id, value: string) => row.original.client.toLowerCase().includes(value.toLowerCase()), header: ({ column }) => ( ), cell: ({ row }) => { const invoice = row.original return (

{invoice.initials} {invoice.client}

) }, }, { accessorKey: "project", enableSorting: false, header: () => Project, cell: ({ row }) => ( {row.original.project} ), }, { accessorKey: "method", enableSorting: false, header: () => Method, cell: ({ row }) => ( {row.original.method} ), }, { accessorKey: "due", sortFn: "datetime", header: ({ column }) => ( ), cell: ({ row }) => ( {formatDate(row.original.due)} ), }, { accessorKey: "status", enableSorting: false, header: () => Status, cell: ({ row }) => { const cfg = statusConfig[row.original.status] return ( ) }, }, { accessorKey: "amount", sortFn: "basic", header: ({ column }) => (

), cell: ({ row }) => ( {fmt.format(row.original.amount)} ), }, { id: "actions", enableSorting: false, enableHiding: false, header: () => Actions, cell: ({ row }) => (

), }, ] export default function TableBlock() { const [sorting, setSorting] = React.useState([ { id: "due", desc: true }, ]) const [columnFilters, setColumnFilters] = React.useState( [] ) const [rowSelection, setRowSelection] = React.useState({}) const table = useTable({ features: TABLE_FEATURES, data: invoices, columns, getRowId: (row) => row.id, state: { sorting, columnFilters, rowSelection }, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onRowSelectionChange: setRowSelection, initialState: { pagination: { pageIndex: 0, pageSize: 7 } }, }) const clientFilter = (table.getColumn("client")?.getFilterValue() as string) ?? "" const selectedCount = table.getFilteredSelectedRowModel().rows.length const totalCount = table.getFilteredRowModel().rows.length const pageCount = table.getPageCount() return (

Acme Inc.

Invoices

Recent billing activity across all client projects.

Outstanding {fmt.format(outstanding)}

{totalCount}{" "} {totalCount === 1 ? "Result" : "Results"}

{selectedCount > 0 && (

{selectedCount} Selected

)}

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { const id = header.column.id return ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ) })} ))} {table.getRowModel().rows.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => { const id = cell.column.id return ( {flexRender( cell.column.columnDef.cell, cell.getContext() )} ) })} )) ) : ( No invoices match your filter. )}

{totalCount} invoices

Page {table.state.pagination.pageIndex + 1} of{" "} {Math.max(pageCount, 1)}

Figures shown in USD. Last updated Jun 17, 2026.

) } 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@7ovr","registryDependencies":["avatar","badge","button","checkbox","dropdown-menu","input","separator","sonner","table"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/table/2/table-block.tsx","content":"$50","type":"registry:component","target":"components/blocks/table-2.tsx"}],"className":"h-[70svh] min-h-80"}]]}]