'use client'; import { type ColumnDef, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table'; import { ChevronLeft, ChevronRight, Eye, MoreHorizontal, Pencil, Trash2, } from 'lucide-react'; import { useState } from 'react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { cn } from '@/lib/utils'; type Status = 'completed' | 'pending' | 'processing' | 'cancelled'; interface Item { id: string; name: string; date: string; status: Status; amount: string; } const statusConfig: Record = { completed: { label: 'Completed', className: 'bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400', }, pending: { label: 'Pending', className: 'bg-amber-500/15 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400', }, processing: { label: 'Processing', className: 'bg-blue-500/15 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400', }, cancelled: { label: 'Cancelled', className: 'bg-rose-500/15 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400', }, }; function StatusBadge({ status }: { status: Status }) { const config = statusConfig[status]; return ( {config.label} ); } const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} /> ), enableSorting: false, enableHiding: false, }, { accessorKey: 'name', header: 'Name', cell: ({ row }) => ( {row.getValue('name')} ), }, { accessorKey: 'date', header: 'Date', }, { accessorKey: 'status', header: 'Status', cell: ({ row }) => , }, { accessorKey: 'amount', header: () =>

Amount

, cell: ({ row }) => (

{row.getValue('amount')}

), }, { id: 'actions', cell: () => (

} > Open menu View details Edit Delete

), }, ]; const data: Item[] = [ { id: '1', name: 'Project Alpha', date: 'Jan 15, 2024', status: 'completed', amount: '$2,500', }, { id: '2', name: 'Website Redesign', date: 'Feb 3, 2024', status: 'processing', amount: '$4,200', }, { id: '3', name: 'Mobile App MVP', date: 'Feb 18, 2024', status: 'pending', amount: '$8,750', }, { id: '4', name: 'Brand Identity', date: 'Mar 5, 2024', status: 'completed', amount: '$1,800', }, { id: '5', name: 'Marketing Campaign', date: 'Mar 22, 2024', status: 'cancelled', amount: '$3,400', }, { id: '6', name: 'Analytics Dashboard', date: 'Apr 8, 2024', status: 'processing', amount: '$5,600', }, { id: '7', name: 'E-commerce Platform', date: 'Apr 25, 2024', status: 'pending', amount: '$12,000', }, { id: '8', name: 'API Integration', date: 'May 10, 2024', status: 'completed', amount: '$3,200', }, ]; export default function Table05() { const [globalFilter, setGlobalFilter] = useState(''); const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), onGlobalFilterChange: setGlobalFilter, globalFilterFn: 'includesString', state: { globalFilter, }, initialState: { pagination: { pageSize: 5 }, }, }); const pageCount = table.getPageCount(); const currentPage = table.getState().pagination.pageIndex + 1; return (

Show entries

setGlobalFilter(e.target.value)} placeholder="Search..." value={globalFilter} />

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {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. )}

Showing{' '} {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}{' '} to{' '} {Math.min( (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize, table.getFilteredRowModel().rows.length )}{' '} of {table.getFilteredRowModel().rows.length} entries

{Array.from({ length: pageCount }, (_, i) => i + 1).map((page) => ( ))}

); }