74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import {
|
|
TableBody,
|
|
TableCell,
|
|
Table as TableComp,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@repo/shadcn-ui/components";
|
|
// SkeletonTable.tsx
|
|
import * as React from "react";
|
|
import { SkeletonDataTableFooter } from './skeleton-data-table-footer.tsx';
|
|
|
|
export type SkeletonTableProps = {
|
|
columns?: number;
|
|
rows?: number;
|
|
stickyHeader?: boolean;
|
|
showFooter?: boolean;
|
|
footerProps?: { pageIndex?: number; pageSize?: number; totalItems?: number };
|
|
}
|
|
|
|
// Componente Skeleton de tabla genérico
|
|
export const SkeletonDataTable = ({
|
|
columns = 6,
|
|
rows = 10,
|
|
stickyHeader = true,
|
|
showFooter = true,
|
|
footerProps,
|
|
}: SkeletonTableProps) => {
|
|
// Genera arrays para mapear
|
|
const cols = React.useMemo(() => Array.from({ length: columns }), [columns]);
|
|
const rws = React.useMemo(() => Array.from({ length: rows }), [rows]);
|
|
|
|
return (
|
|
<div className="overflow-hidden rounded-md border bg-background" role="status" aria-busy="true">
|
|
<TableComp className="w-full text-sm">
|
|
<TableHeader className={stickyHeader ? "sticky top-0 z-10 bg-muted" : ""}>
|
|
<TableRow>
|
|
{cols.map((_, i) => (
|
|
<TableHead key={`sk-th-${i}`}>
|
|
<div className="h-4 w-24 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
{rws.map((_, r) => (
|
|
<TableRow key={`sk-tr-${r}`}>
|
|
{cols.map((_, c) => (
|
|
<TableCell key={`sk-td-${r}-${c}`} className="align-top">
|
|
<div
|
|
className={[
|
|
"h-4 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none",
|
|
c === 0 ? "w-36" : "w-full",
|
|
"my-2",
|
|
].join(" ")}
|
|
style={{ maxWidth: c % 3 === 0 ? "14rem" : c % 3 === 1 ? "10rem" : "100%" }}
|
|
/>
|
|
{c > 0 && (
|
|
<div className="mt-2 h-3 w-1/2 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
|
|
)}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</TableComp>
|
|
|
|
{showFooter && <SkeletonDataTableFooter {...footerProps} />}
|
|
|
|
<span className="sr-only">Loading table…</span>
|
|
</div>
|
|
);
|
|
} |