'use client' import React, { useState } from 'react'; const TableUI = ({ initialData = [] }) => { const [searchTerm, setSearchTerm] = useState(''); const [selectedRows, setSelectedRows] = useState(new Set()); const [currentPage, setCurrentPage] = useState(1); const [sortConfig, setSortConfig] = useState({ field: null, direction: 'asc' }); // Sample data const sampleData = [ { id: 1, name: "John Doe", email: "john@example.com", status: "Active", role: "Admin", lastActive: "2 hours ago" }, { id: 2, name: "Jane Smith", email: "jane@example.com", status: "Pending", role: "Editor", lastActive: "5 mins ago" }, { id: 3, name: "Bob Wilson", email: "bob@example.com", status: "Inactive", role: "User", lastActive: "1 day ago" }, { id: 4, name: "Alice Brown", email: "alice@example.com", status: "Active", role: "Admin", lastActive: "1 hour ago" }, { id: 5, name: "Charlie Davis", email: "charlie@example.com", status: "Active", role: "User", lastActive: "Just now" }, ]; const data = initialData.length > 0 ? initialData : sampleData; const itemsPerPage = 5; // Search functionality const filteredData = data.filter(item => Object.values(item).some(value => value.toString().toLowerCase().includes(searchTerm.toLowerCase()) ) ); // Sorting const sortedData = [...filteredData].sort((a, b) => { if (!sortConfig.field) return 0; const aValue = a[sortConfig.field]; const bValue = b[sortConfig.field]; return ( sortConfig.direction === 'asc' ? aValue > bValue ? 1 : -1 : aValue < bValue ? 1 : -1 ); }); // Pagination const totalPages = Math.ceil(sortedData.length / itemsPerPage); const paginatedData = sortedData.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage ); // Status badge styles const getStatusStyle = (status) => { const baseStyle = "px-2 py-1 rounded-full text-xs font-medium"; switch (status.toLowerCase()) { case 'active': return `${baseStyle} bg-green-100 text-green-800`; case 'pending': return `${baseStyle} bg-yellow-100 text-yellow-800`; case 'inactive': return `${baseStyle} bg-red-100 text-red-800`; default: return `${baseStyle} bg-gray-100 text-gray-800`; } }; return (

{/* Header and Search */}

setSearchTerm(e.target.value)} className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" />

{selectedRows.size} row(s) selected

{/* Table */}

{Object.keys(data[0]).map(header => ( header !== 'id' && ( ) ))} {paginatedData.map((row) => ( {Object.entries(row).map(([key, value]) => ( key !== 'id' && ( ) ))} ))}

{ if (e.target.checked) { setSelectedRows(new Set(paginatedData.map(row => row.id))); } else { setSelectedRows(new Set()); } }} />	setSortConfig({ field: header, direction: sortConfig.field === header && sortConfig.direction === 'asc' ? 'desc' : 'asc' })} > {header} {sortConfig.field === header && ( {sortConfig.direction === 'asc' ? '↑' : '↓'} )}
{ const newSelected = new Set(selectedRows); if (e.target.checked) { newSelected.add(row.id); } else { newSelected.delete(row.id); } setSelectedRows(newSelected); }} />	{key === 'status' ? ( {value} ) : ( {value} )}

{/* Pagination */}

Showing {Math.min(itemsPerPage, filteredData.length)} of {filteredData.length} results

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

); }; export default TableUI;

Tables with search

Usage