|
| 1 | +import React, { useState, useMemo } from 'react'; |
| 2 | + |
| 3 | +interface Column { |
| 4 | + key: string; |
| 5 | + label: string; |
| 6 | + isImage?: boolean; |
| 7 | + render?: (item: any) => React.ReactNode; |
| 8 | + sortable: boolean; |
| 9 | +} |
| 10 | + |
| 11 | +interface TableProps { |
| 12 | + data: any[]; |
| 13 | + columns: Column[]; |
| 14 | + itemsPerPage: number; |
| 15 | +} |
| 16 | + |
| 17 | +const getInitials = (firstName: string, lastName: string) => |
| 18 | + `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase(); |
| 19 | + |
| 20 | +const getRandomColor = () => { |
| 21 | + const letters = '0123456789ABCDEF'; |
| 22 | + let color = '#'; |
| 23 | + for (let i = 0; i < 6; i++) { |
| 24 | + color += letters[Math.floor(Math.random() * 16)]; |
| 25 | + } |
| 26 | + return color; |
| 27 | +}; |
| 28 | + |
| 29 | +const Table: React.FC<TableProps> = ({ data, columns, itemsPerPage }) => { |
| 30 | + const [currentPage, setCurrentPage] = useState(1); |
| 31 | + const [sortColumn, setSortColumn] = useState<string | null>(null); |
| 32 | + const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc'); |
| 33 | + const [searchTerm, setSearchTerm] = useState(''); |
| 34 | + |
| 35 | + const filteredData = useMemo( |
| 36 | + () => |
| 37 | + data.filter(item => |
| 38 | + columns.some(column => String(item[column.key]).toLowerCase().includes(searchTerm.toLowerCase())) |
| 39 | + ), |
| 40 | + [data, columns, searchTerm] |
| 41 | + ); |
| 42 | + |
| 43 | + const sortedData = useMemo(() => { |
| 44 | + if (!sortColumn) return filteredData; |
| 45 | + return [...filteredData].sort((a, b) => { |
| 46 | + if (a[sortColumn] < b[sortColumn]) return sortDirection === 'asc' ? -1 : 1; |
| 47 | + if (a[sortColumn] > b[sortColumn]) return sortDirection === 'asc' ? 1 : -1; |
| 48 | + return 0; |
| 49 | + }); |
| 50 | + }, [filteredData, sortColumn, sortDirection]); |
| 51 | + |
| 52 | + const paginatedData = useMemo(() => { |
| 53 | + const startIndex = (currentPage - 1) * itemsPerPage; |
| 54 | + return sortedData.slice(startIndex, startIndex + itemsPerPage); |
| 55 | + }, [sortedData, currentPage, itemsPerPage]); |
| 56 | + |
| 57 | + const totalPages = Math.ceil(sortedData.length / itemsPerPage); |
| 58 | + |
| 59 | + const handleSort = (column: string) => { |
| 60 | + if (column === sortColumn) { |
| 61 | + setSortDirection(prev => (prev === 'asc' ? 'desc' : 'asc')); |
| 62 | + } else { |
| 63 | + setSortColumn(column); |
| 64 | + setSortDirection('asc'); |
| 65 | + } |
| 66 | + }; |
| 67 | + |
| 68 | + const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => { |
| 69 | + setSearchTerm(e.target.value); |
| 70 | + setCurrentPage(1); |
| 71 | + }; |
| 72 | + |
| 73 | + const renderCell = (item: any, column: Column) => { |
| 74 | + if (column.isImage) { |
| 75 | + return item[column.key] ? ( |
| 76 | + <img |
| 77 | + src={item[column.key]} |
| 78 | + alt={`${item.firstName} ${item.lastName}`} |
| 79 | + className='ml-2 w-10 h-10 rounded-full object-cover' |
| 80 | + /> |
| 81 | + ) : ( |
| 82 | + <div |
| 83 | + className='ml-2 w-10 h-10 flex items-center justify-center text-whiteColor font-bold text-lg rounded-full uppercase' |
| 84 | + style={{ backgroundColor: getRandomColor() }} |
| 85 | + > |
| 86 | + {getInitials(item.firstName, item.lastName)} |
| 87 | + </div> |
| 88 | + ); |
| 89 | + } |
| 90 | + if (column.render) return column.render(item); |
| 91 | + return column.key.includes('.') |
| 92 | + ? column.key.split('.').reduce((obj, key) => obj && obj[key], item) |
| 93 | + : item[column.key]; |
| 94 | + }; |
| 95 | + |
| 96 | + return ( |
| 97 | + <div className='overflow-x-auto pl-4'> |
| 98 | + <div className='mb-2 flex justify-between items-center'> |
| 99 | + <h1 className='text-2xl font-bold'>Buyers Page</h1> |
| 100 | + <input |
| 101 | + type='text' |
| 102 | + placeholder='Search buyer...' |
| 103 | + value={searchTerm} |
| 104 | + onChange={handleSearch} |
| 105 | + className='px-2 py-1 border rounded outline-none' |
| 106 | + /> |
| 107 | + </div> |
| 108 | + <div className='rounded-lg overflow-hidden'> |
| 109 | + <table className='min-w-full bg-whiteColor px-10'> |
| 110 | + <thead className='bg-darkGreen'> |
| 111 | + <tr> |
| 112 | + {columns.map(column => ( |
| 113 | + <th |
| 114 | + key={column.key} |
| 115 | + onClick={() => column.sortable && handleSort(column.key)} |
| 116 | + className={`px-4 py-4 text-sm font-bold text-whiteColor uppercase tracking-wider ${ |
| 117 | + column.sortable ? 'cursor-pointer' : '' |
| 118 | + } ${column.isImage ? 'text-center' : 'text-left'}`} |
| 119 | + > |
| 120 | + {column.label} |
| 121 | + {column.sortable && sortColumn === column.key && <span>{sortDirection === 'asc' ? ' ▲' : ' ▼'}</span>} |
| 122 | + </th> |
| 123 | + ))} |
| 124 | + </tr> |
| 125 | + </thead> |
| 126 | + <tbody> |
| 127 | + {paginatedData.map((item, index) => ( |
| 128 | + <tr key={index} className={index % 2 === 0 ? 'bg-[#F3F4F6]' : 'bg-whiteColor'}> |
| 129 | + {columns.map(column => ( |
| 130 | + <td |
| 131 | + key={column.key} |
| 132 | + className={`px-4 py-2 whitespace-nowrap text-sm ${column.isImage ? 'text-center' : 'text-left'}`} |
| 133 | + > |
| 134 | + {renderCell(item, column)} |
| 135 | + </td> |
| 136 | + ))} |
| 137 | + </tr> |
| 138 | + ))} |
| 139 | + </tbody> |
| 140 | + </table> |
| 141 | + </div> |
| 142 | + <div className='mt-4 flex flex-col sm:flex-row justify-between items-center'> |
| 143 | + <div className='mb-2 sm:mb-0 text-sm'> |
| 144 | + Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, sortedData.length)} of{' '} |
| 145 | + {sortedData.length} buyers |
| 146 | + </div> |
| 147 | + <div className='flex justify-center'> |
| 148 | + <button |
| 149 | + onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} |
| 150 | + disabled={currentPage === 1} |
| 151 | + className='px-3 py-1 border rounded-lg border-darkGreen mr-2 text-sm' |
| 152 | + > |
| 153 | + Previous |
| 154 | + </button> |
| 155 | + <button |
| 156 | + onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} |
| 157 | + disabled={currentPage === totalPages} |
| 158 | + className='px-3 py-1 border rounded-lg border-darkGreen text-sm' |
| 159 | + > |
| 160 | + Next |
| 161 | + </button> |
| 162 | + </div> |
| 163 | + </div> |
| 164 | + </div> |
| 165 | + ); |
| 166 | +}; |
| 167 | + |
| 168 | +export default Table; |
0 commit comments