117 lines
3.3 KiB
TypeScript
117 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export type DataTableColumn<T> = {
|
|
key: string;
|
|
label: string;
|
|
sortable?: boolean;
|
|
className?: string;
|
|
render: (row: T) => ReactNode;
|
|
};
|
|
|
|
type Props<T> = {
|
|
columns: DataTableColumn<T>[];
|
|
rows: T[];
|
|
rowKey: (row: T) => string | number;
|
|
sortKey: string;
|
|
sortDirection: "asc" | "desc";
|
|
loading?: boolean;
|
|
error?: string;
|
|
emptyTitle: string;
|
|
emptyDescription: string;
|
|
onSort: (key: string) => void;
|
|
};
|
|
|
|
export default function DataTable<T>({
|
|
columns,
|
|
rows,
|
|
rowKey,
|
|
sortKey,
|
|
sortDirection,
|
|
loading = false,
|
|
error,
|
|
emptyTitle,
|
|
emptyDescription,
|
|
onSort,
|
|
}: Props<T>) {
|
|
return (
|
|
<div className="overflow-hidden rounded-lg border bg-white">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full min-w-[920px] text-sm">
|
|
<thead className="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
|
|
<tr>
|
|
{columns.map((column) => {
|
|
const active = sortKey === column.key;
|
|
const SortIcon = active
|
|
? sortDirection === "asc"
|
|
? ArrowUp
|
|
: ArrowDown
|
|
: ArrowUpDown;
|
|
|
|
return (
|
|
<th key={column.key} className={column.className ?? "px-4 py-3"}>
|
|
{column.sortable ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-1 text-xs uppercase tracking-wide"
|
|
onClick={() => onSort(column.key)}
|
|
>
|
|
{column.label}
|
|
<SortIcon size={14} />
|
|
</Button>
|
|
) : (
|
|
column.label
|
|
)}
|
|
</th>
|
|
);
|
|
})}
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{loading && (
|
|
<tr>
|
|
<td colSpan={columns.length} className="px-4 py-12 text-center text-slate-500">
|
|
Daten werden geladen...
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
{!loading && error && (
|
|
<tr>
|
|
<td colSpan={columns.length} className="px-4 py-12 text-center text-red-600">
|
|
{error}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
{!loading && !error && rows.length === 0 && (
|
|
<tr>
|
|
<td colSpan={columns.length} className="px-4 py-12 text-center">
|
|
<p className="font-medium text-slate-900">{emptyTitle}</p>
|
|
<p className="mt-1 text-slate-500">{emptyDescription}</p>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
{!loading && !error && rows.map((row) => (
|
|
<tr key={rowKey(row)} className="border-t hover:bg-slate-50">
|
|
{columns.map((column) => (
|
|
<td key={column.key} className={column.className ?? "px-4 py-3"}>
|
|
{column.render(row)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|