"use client";
import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";
interface Column<T> {
key: string;
header: string;
render?: (item: T) => React.ReactNode;
}
interface DataTableProps<T> {
columns: Column<T>[];
data: T[];
pagination?: {
page: number;
pages: number;
total: number;
onPageChange: (page: number) => void;
};
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function DataTable<T extends Record<string, any>>({
columns,
data,
pagination,
}: DataTableProps<T>) {
return (
<div className="rounded-md border border-zinc-200 dark:border-zinc-800">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
{columns.map((col) => (
<th key={col.key} className="px-4 py-3 text-left font-medium text-zinc-500 dark:text-zinc-400">
{col.header}
</th>
))}
</tr>
</thead>
<tbody>
{data.length === 0 ? (
<tr>
<td colSpan={columns.length} className="px-4 py-8 text-center text-zinc-400">
No data available
</td>
</tr>
) : (
data.map((item, i) => (
<tr key={i} className="border-b border-zinc-100 dark:border-zinc-800 last:border-0 hover:bg-zinc-50 dark:hover:bg-zinc-900/50">
{columns.map((col) => (
<td key={col.key} className="px-4 py-3">
{col.render ? col.render(item) : String(item[col.key] ?? "")}
</td>
))}
</tr>
))
)}
</tbody>
</table>
</div>
{pagination && pagination.pages > 1 && (
<div className="flex items-center justify-between border-t border-zinc-200 px-4 py-3 dark:border-zinc-800">
<p className="text-sm text-zinc-500">
Page {pagination.page} of {pagination.pages} ({pagination.total} items)
</p>
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={() => pagination.onPageChange(pagination.page - 1)} disabled={pagination.page <= 1}>
<ChevronLeft size={16} />
</Button>
<Button variant="outline" size="sm" onClick={() => pagination.onPageChange(pagination.page + 1)} disabled={pagination.page >= pagination.pages}>
<ChevronRight size={16} />
</Button>
</div>
</div>
)}
</div>
);
}
