File size: 2,164 Bytes
fc1eb7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import * as React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
interface DataTableProps<TData> {
data: TData[];
columns: {
accessorKey: keyof TData | ((row: TData) => any);
header: string;
cell?: (row: TData) => React.ReactNode;
}[];
onRowClick?: (row: TData) => void;
className?: string;
}
export function DataTable<TData>({
data,
columns,
onRowClick,
className,
}: DataTableProps<TData>) {
return (
<div className={`w-full overflow-auto ${className}`}>
<Table>
<TableHeader>
<TableRow>
{columns.map((column, i) => (
<TableHead key={i} className="text-xs font-medium text-gray-500 uppercase tracking-wider">
{column.header}
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{data.length === 0 ? (
<TableRow>
<TableCell colSpan={columns.length} className="text-center py-6 text-sm text-gray-500">
No data available
</TableCell>
</TableRow>
) : (
data.map((row, i) => (
<TableRow
key={i}
onClick={() => onRowClick?.(row)}
className={onRowClick ? "cursor-pointer hover:bg-gray-50" : ""}
>
{columns.map((column, j) => (
<TableCell key={j} className="whitespace-nowrap">
{column.cell ? (
column.cell(row)
) : (
<div className="text-sm text-gray-900">
{typeof column.accessorKey === "function"
? column.accessorKey(row)
: row[column.accessorKey] !== undefined
? String(row[column.accessorKey])
: ""}
</div>
)}
</TableCell>
))}
</TableRow>
))
)}
</TableBody>
</Table>
</div>
);
}
|