File size: 2,104 Bytes
02eb851 |
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 |
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import { Skeleton } from "@/components/ui/skeleton"
interface TableData {
[key: string]: string | number;
}
interface TableProps {
data: TableData[] | undefined;
caption?: string;
}
export function GenericTable({ data, caption }: TableProps) {
const headers = data && data.length > 0 ? ['#', ...Object.keys(data[0])] : [];
const isLoading = !data;
const isEmpty = data && data.length === 0;
const renderSkeleton = (count: number) => (
[...Array(count)].map((_, index) => (
<TableCell key={index}>
<Skeleton className="h-4 w-full" />
</TableCell>
))
);
const renderHeaders = () => headers.map((header, index) => (
<TableHead
key={header}
className={`${index === 0 ? 'text-right' : 'text-left'} text-black font-bold`}
>
{header.toUpperCase()}
</TableHead>
));
const renderRows = () => {
if (isLoading) {
return [...Array(10)].map((_, index) => <TableRow key={index}>{renderSkeleton(5)}</TableRow>);
}
if (isEmpty) {
return (
<TableRow>
<TableCell colSpan={headers.length || 1} className="text-center py-4">
No results found
</TableCell>
</TableRow>
);
}
return data.map((row, index) => (
<TableRow key={index}>
<TableCell className="text-right font-medium">{index + 1}</TableCell>
{Object.entries(row).map(([key, value]) => (
<TableCell
key={`${index}-${key}`}
className={key.toLowerCase().includes('amount') ? 'text-right' : ''}
>
{value}
</TableCell>
))}
</TableRow>
));
};
return (
<Table>
{caption && <TableCaption>{caption}</TableCaption>}
<TableHeader>
<TableRow>
{isLoading ? renderSkeleton(5) : isEmpty ? null : renderHeaders()}
</TableRow>
</TableHeader>
<TableBody>
{renderRows()}
</TableBody>
</Table>
);
}
|