"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { ColumnDef, ColumnFiltersState, FilterFn, flexRender, getCoreRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, PaginationState, Row, SortingState, useReactTable, VisibilityState } from "@tanstack/react-table"; import { ChevronDownIcon, ChevronFirstIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleAlertIcon, CircleXIcon, Columns3Icon, EllipsisIcon, FilterIcon, ListFilterIcon, PlusIcon, TrashIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Pagination, PaginationContent, PaginationItem } from "@/components/ui/pagination"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; type Item = { id: string; name: string; email: string; location: string; flag: string; status: "Active" | "Inactive" | "Pending"; balance: number; }; // Custom filter function for multi-column searching const multiColumnFilterFn: FilterFn = (row, columnId, filterValue) => { const searchableRowContent = `${row.original.name} ${row.original.email}`.toLowerCase(); const searchTerm = (filterValue ?? "").toLowerCase(); return searchableRowContent.includes(searchTerm); }; const statusFilterFn: FilterFn = (row, columnId, filterValue: string[]) => { if (!filterValue?.length) return true; const status = row.getValue(columnId) as string; return filterValue.includes(status); }; const columns: ColumnDef[] = [ { id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" /> ), size: 28, enableSorting: false, enableHiding: false }, { header: "Name", accessorKey: "name", cell: ({ row }) =>

{row.getValue("name")}

, size: 180, filterFn: multiColumnFilterFn, enableHiding: false }, { header: "Email", accessorKey: "email", size: 220 }, { header: "Location", accessorKey: "location", cell: ({ row }) => (

{row.original.flag} {row.getValue("location")}

), size: 180 }, { header: "Status", accessorKey: "status", cell: ({ row }) => ( {row.getValue("status")} ), size: 100, filterFn: statusFilterFn }, { header: "Performance", accessorKey: "performance" }, { header: "Balance", accessorKey: "balance", cell: ({ row }) => { const amount = parseFloat(row.getValue("balance")); const formatted = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(amount); return formatted; }, size: 120 }, { id: "actions", header: () => Actions, cell: ({ row }) => , size: 60, enableHiding: false } ]; export default function Component() { const id = useId(); const [columnFilters, setColumnFilters] = useState([]); const [columnVisibility, setColumnVisibility] = useState({}); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 }); const inputRef = useRef(null); const [sorting, setSorting] = useState([ { id: "name", desc: false } ]); const [data, setData] = useState([]); useEffect(() => { async function fetchPosts() { const res = await fetch( "https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json" ); const data = await res.json(); setData(data); } fetchPosts(); }, []); const handleDeleteRows = () => { const selectedRows = table.getSelectedRowModel().rows; const updatedData = data.filter( (item) => !selectedRows.some((row) => row.original.id === item.id) ); setData(updatedData); table.resetRowSelection(); }; const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), onSortingChange: setSorting, enableSortingRemoval: false, getPaginationRowModel: getPaginationRowModel(), onPaginationChange: setPagination, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, getFilteredRowModel: getFilteredRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), state: { sorting, pagination, columnFilters, columnVisibility } }); // Get unique status values const uniqueStatusValues = useMemo(() => { const statusColumn = table.getColumn("status"); if (!statusColumn) return []; const values = Array.from(statusColumn.getFacetedUniqueValues().keys()); return values.sort(); }, [table.getColumn("status")?.getFacetedUniqueValues()]); // Get counts for each status const statusCounts = useMemo(() => { const statusColumn = table.getColumn("status"); if (!statusColumn) return new Map(); return statusColumn.getFacetedUniqueValues(); }, [table.getColumn("status")?.getFacetedUniqueValues()]); const selectedStatuses = useMemo(() => { const filterValue = table.getColumn("status")?.getFilterValue() as string[]; return filterValue ?? []; }, [table.getColumn("status")?.getFilterValue()]); const handleStatusChange = (checked: boolean, value: string) => { const filterValue = table.getColumn("status")?.getFilterValue() as string[]; const newFilterValue = filterValue ? [...filterValue] : []; if (checked) { newFilterValue.push(value); } else { const index = newFilterValue.indexOf(value); if (index > -1) { newFilterValue.splice(index, 1); } } table.getColumn("status")?.setFilterValue(newFilterValue.length ? newFilterValue : undefined); }; return (

{/* Filters */}

{/* Filter by name or email */}

table.getColumn("name")?.setFilterValue(e.target.value)} placeholder="Filter by name or email..." type="text" aria-label="Filter by name or email" />

{Boolean(table.getColumn("name")?.getFilterValue()) && ( )}

{/* Filter by status */}

Filters

{uniqueStatusValues.map((value, i) => (

handleStatusChange(checked, value)} /> {value}{" "} {statusCounts.get(value)}

))}

{/* Toggle columns visibility */} Toggle columns {table .getAllColumns() .filter((column) => column.getCanHide()) .map((column) => { return ( column.toggleVisibility(!!value)} onSelect={(event) => event.preventDefault()}> {column.id} ); })}

{/* Delete button */} {table.getSelectedRowModel().rows.length > 0 && (

Are you absolutely sure? This action cannot be undone. This will permanently delete{" "} {table.getSelectedRowModel().rows.length} selected{" "} {table.getSelectedRowModel().rows.length === 1 ? "row" : "rows"}.

Cancel Delete )} {/* Add user button */}

{/* Table */}

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : header.column.getCanSort() ? (

{ // Enhanced keyboard handling for sorting if ( header.column.getCanSort() && (e.key === "Enter" || e.key === " ") ) { e.preventDefault(); header.column.getToggleSortingHandler()?.(e); } }} tabIndex={header.column.getCanSort() ? 0 : undefined}> {flexRender(header.column.columnDef.header, header.getContext())} {{ asc: (

) : ( 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. )}

{/* Pagination */}

{/* Results per page */}

Rows per page

{/* Page number information */}

{table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}- {Math.min( Math.max( table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, 0 ), table.getRowCount() )} {" "} of {table.getRowCount().toString()}

{/* Pagination buttons */}

{/* First page button */} {/* Previous page button */} {/* Next page button */} {/* Last page button */}

); } function RowActions({ row }: { row: Row }) { return (

Edit ⌘E Duplicate ⌘D Archive ⌘A More Move to project Move to folder Advanced options Share Add to favorites Delete ⌘⌫ ); }