"use client"; import * as React from "react"; import { ColumnDef, ColumnFiltersState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table"; import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; const data: Payment[] = [ { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@yahoo.com", }, { id: "3u1reuv4", amount: 242, status: "success", email: "Abe45@gmail.com", }, { id: "derv1ws0", amount: 837, status: "processing", email: "Monserrat44@gmail.com", }, { id: "5kma53ae", amount: 874, status: "success", email: "Silas22@gmail.com", }, { id: "bhqecj4p", amount: 721, status: "failed", email: "carmella@hotmail.com", }, ]; export type Payment = { id: string; amount: number; status: "pending" | "processing" | "success" | "failed"; email: string; }; export const columns: ColumnDef[] = [ { id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" /> ), enableSorting: false, enableHiding: false, }, { accessorKey: "status", header: "Status", cell: ({ row }) => (

{row.getValue("status")}

), }, { accessorKey: "email", header: ({ column }) => { return ( ); }, cell: ({ row }) =>

{row.getValue("email")}

, }, { accessorKey: "amount", header: () =>

Amount

, cell: ({ row }) => { const amount = parseFloat(row.getValue("amount")); // Format the amount as a dollar amount const formatted = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }).format(amount); return

{formatted}

; }, }, { id: "actions", enableHiding: false, cell: ({ row }) => { const payment = row.original; return ( Actions navigator.clipboard.writeText(payment.id)} > Copy payment ID View customer View payment details ); }, }, ]; export function Tabledata() { const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] ); const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); const table = useReactTable({ data, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), onColumnVisibilityChange: setColumnVisibility, onRowSelectionChange: setRowSelection, state: { sorting, columnFilters, columnVisibility, rowSelection, }, }); return (

table.getColumn("email")?.setFilterValue(event.target.value) } className="max-w-sm" /> {table .getAllColumns() .filter((column) => column.getCanHide()) .map((column) => { return ( column.toggleVisibility(!!value) } > {column.id} ); })}

{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. )}

{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.

); }

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

Status		Amount
success	ken99@yahoo.com	$316.00
success	Abe45@gmail.com	$242.00
processing	Monserrat44@gmail.com	$837.00
success	Silas22@gmail.com	$874.00
failed	carmella@hotmail.com	$721.00

Components