50: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"] 51:T29a2,"use client"; import * as React from "react"; import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState } from "@tanstack/react-table"; import { ArrowUpDown, ChevronDown, ColumnsIcon, MoreHorizontal, SearchIcon, Trash2, Download, Copy, FileText, Edit } 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"; const data: Payment[] = [ { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@example.com" }, { id: "3u1reuv4", amount: 242, status: "success", email: "Abe45@example.com" }, { id: "derv1ws0", amount: 837, status: "processing", email: "Monserrat44@example.com" }, { id: "5kma53ae", amount: 874, status: "success", email: "Silas22@example.com" }, { id: "bhqecj4p", amount: 721, status: "failed", email: "carmella@example.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")); 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 default function DataTableDemo() { 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)} />

{table.getFilteredSelectedRowModel().rows.length > 0 && ( {table.getFilteredSelectedRowModel().rows.length} selected Copy selected IDs Copy as JSON Export as CSV Delete selected )} {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.

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"contents/components/data-table/6/index.tsx","content":"$51","type":"registry:component","target":"components/data-table6.tsx"}],"className":"h-[70svh] min-h-80"}]]}]