"use client" import * as React from "react" import { cn } from "@/lib/utils" import { ChevronLeft, ChevronRight, Search } from "lucide-react" export interface Column { key: string header: string cell?: (item: T) => React.ReactNode className?: string } export interface DataTableProps { columns: Column[] data: T[] searchKey?: string pageSize?: number className?: string } function DataTable>({ columns, data, searchKey, pageSize = 10, className, }: DataTableProps) { const [searchTerm, setSearchTerm] = React.useState("") const [currentPage, setCurrentPage] = React.useState(1) const filteredData = React.useMemo(() => { if (!searchKey || !searchTerm.trim()) return data const term = searchTerm.toLowerCase() return data.filter((item) => { const value = item[searchKey] return String(value ?? "").toLowerCase().includes(term) }) }, [data, searchKey, searchTerm]) const totalPages = Math.max(1, Math.ceil(filteredData.length / pageSize)) const safeCurrentPage = Math.min(currentPage, totalPages) const paginatedData = React.useMemo(() => { const start = (safeCurrentPage - 1) * pageSize return filteredData.slice(start, start + pageSize) }, [filteredData, safeCurrentPage, pageSize]) const getCellValue = (item: T, column: Column): React.ReactNode => { if (column.cell) return column.cell(item) return String(item[column.key] ?? "") } return (

{searchKey && (

{ setSearchTerm(e.target.value) setCurrentPage(1) }} placeholder={`Search ${searchKey}...`} className="h-9 w-full rounded-xl border-1 border-white/20 bg-white/5 pl-9 pr-3 text-sm text-foreground placeholder:text-foreground/40 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20" />

)}

{columns.map((col) => ( ))} {paginatedData.length === 0 ? ( ) : ( paginatedData.map((item, rowIdx) => ( {columns.map((col) => ( ))} )) )}

{col.header}
No results found.
{getCellValue(item, col)}

{totalPages > 1 && (

Page {safeCurrentPage} of {totalPages}

)}

) } DataTable.displayName = "DataTable" export { DataTable }

Name	Role
Alice	Developer
Bob	Designer