File size: 2,367 Bytes
5da4770 | 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 'use client';
import * as React from 'react';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
export interface DataTableColumn<T> {
id: string;
header: string;
accessorKey?: keyof T;
cell?: (item: T) => React.ReactNode;
className?: string;
headerClassName?: string;
width?: string;
}
export interface DataTableProps<T> {
columns: DataTableColumn<T>[];
data: T[];
className?: string;
emptyMessage?: string;
onRowClick?: (item: T) => void;
}
export function DataTable<T>({
columns,
data,
className,
emptyMessage = 'No data available',
onRowClick,
}: DataTableProps<T>) {
return (
<div className={cn('rounded-md border', className)}>
<Table>
<TableHeader>
<TableRow>
{columns.map((column) => (
<TableHead
key={column.id}
className={cn(column.headerClassName, column.width, 'text-muted-foreground font-semibold')}
>
{column.header}
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{data.length === 0 ? (
<TableRow>
<TableCell colSpan={columns.length} className="text-center py-8 text-muted-foreground">
{emptyMessage}
</TableCell>
</TableRow>
) : (
data.map((item, index) => (
<TableRow
key={index}
className={cn(
onRowClick && 'cursor-pointer hover:bg-muted/50',
)}
onClick={() => onRowClick?.(item)}
>
{columns.map((column) => (
<TableCell
key={column.id}
className={cn(column.className, column.width)}
>
{column.cell
? column.cell(item)
: column.accessorKey
? String(item[column.accessorKey] || '')
: ''
}
</TableCell>
))}
</TableRow>
))
)}
</TableBody>
</Table>
</div>
);
} |