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:T3086,"use client"; import * as React from "react"; import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState, type Row } from "@tanstack/react-table"; import { ArrowUpDown, ChevronDown, ColumnsIcon, MoreHorizontal, SearchIcon, Trash2, Download, Copy, FileText, GripVertical } from "lucide-react"; import { DndContext, closestCenter, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, type DragEndEvent, type UniqueIdentifier } from "@dnd-kit/core"; import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; 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 initialData: 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; }; function DragHandle({ id }: { id: string }) { const { attributes, listeners } = useSortable({ id }); return ( ); } function DraggableRow({ row }: { row: Row }) { const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.original.id }); return ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} ); } export const columns: ColumnDef[] = [ { id: "drag", header: () => null, cell: ({ row }) => , enableSorting: false, enableHiding: false }, { 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 [data, setData] = React.useState(initialData); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState([]); const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); const sensors = useSensors( useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}) ); const dataIds = React.useMemo( () => data?.map(({ id }) => id) || [], [data] ); const table = useReactTable({ data, columns, getRowId: (row) => row.id, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), onColumnVisibilityChange: setColumnVisibility, onRowSelectionChange: setRowSelection, state: { sorting, columnFilters, columnVisibility, rowSelection } }); function handleDragEnd(event: DragEndEvent) { const { active, over } = event; if (active && over && active.id !== over.id) { setData((data) => { const oldIndex = dataIds.indexOf(active.id); const newIndex = dataIds.indexOf(over.id); return arrayMove(data, oldIndex, newIndex); }); } } 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) => ( ))} ) : ( 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/4/index.tsx","content":"$51","type":"registry:component","target":"components/data-table4.tsx"}],"className":"h-[70svh] min-h-80"}]]}]