37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
'use client';
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
|
|
interface TableSkeletonProps {
|
|
rowCount?: number
|
|
columnCount: number
|
|
hasActions?: boolean
|
|
}
|
|
|
|
export function TableSkeleton({
|
|
rowCount = 10,
|
|
columnCount,
|
|
hasActions = true
|
|
}: TableSkeletonProps) {
|
|
return (
|
|
<>
|
|
{Array.from({ length: rowCount }).map((_, rowIndex) => (
|
|
<tr key={rowIndex} className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
|
|
{Array.from({ length: columnCount }).map((_, colIndex) => (
|
|
<td key={colIndex} className="p-2 align-middle">
|
|
<Skeleton className="h-4 w-[100px]" />
|
|
</td>
|
|
))}
|
|
{hasActions && (
|
|
<td className="p-2 align-middle">
|
|
<div className="flex gap-2">
|
|
<Skeleton className="h-7 w-7" />
|
|
<Skeleton className="h-7 w-7" />
|
|
</div>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))}
|
|
</>
|
|
)
|
|
}
|