markus/next-ory
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 1 Packages Wiki Activity Actions

NORY-15: add data-table fallback component

Browse source 
This component can be used as suspense fallback for data tables
This commit is contained in:
Markus Thielker 2024-12-03 16:21:32 +01:00
parent cf96a98f91
commit 1b7e1c2cca
No known key found for this signature in database
1 changed files with 53 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
dashboard/src/components/ui/data-table-fallback.tsx Normal file
View file

@ -0,0 +1,53 @@
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Skeleton } from '@/components/ui/skeleton';
interface DataTableFallbackProps {
columnCount: number,
rowCount: number,
}
export async function DataTableFallback({ columnCount, rowCount }: DataTableFallbackProps) {
const columns: string[] = [];
for (let i = 0; i < columnCount; i++) {
columns.push('');
}
const rows: string[] = [];
for (let i = 0; i < rowCount; i++) {
rows.push('');
}
return (
<div className="rounded-md border">
<Table>
<TableHeader>
{
columns.map((_, index) => {
return (
<TableHead key={index}>
<Skeleton className="w-20 h-6"/>
</TableHead>
);
})
}
</TableHeader>
<TableBody>
{
rows.map((_, index) =>
<TableRow key={index} className="h-4">
{
columns.map((_, index) =>
<TableCell key={index} className="h-4">
<Skeleton className="w-full h-4"/>
</TableCell>,
)
}
</TableRow>,
)
}
</TableBody>
</Table>
</div>
);
}