Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(admin): make product table list scrollable with sticky header
All checks were successful
Staging Build / build (push) Successful in 3m27s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-03 10:50:31 +02:00
parent 4f69fd7e44
commit 99f859cde3
1 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
shop/components/admin/product-list.tsx
View File

@@ -211,40 +211,42 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Table> <div className="overflow-auto max-h-[600px] border border-slate-200 dark:border-white/10 rounded-lg scrollbar-thin">
<TableHeader> <Table>
<TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5"> <TableHeader className="sticky top-0 bg-white dark:bg-slate-900/95 backdrop-blur-sm z-10">
<TableHead className="text-slate-700 dark:text-white font-bold">Name</TableHead> <TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
<TableHead className="text-slate-700 dark:text-white font-bold">Basispreis</TableHead> <TableHead className="text-slate-700 dark:text-white font-bold">Name</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold">Module</TableHead> <TableHead className="text-slate-700 dark:text-white font-bold">Basispreis</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold">Status</TableHead> <TableHead className="text-slate-700 dark:text-white font-bold">Module</TableHead>
<TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead> <TableHead className="text-slate-700 dark:text-white font-bold">Status</TableHead>
</TableRow> <TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead>
</TableHeader>
<TableBody>
{isGroupedByCategory ? (
groupedProducts.map((group) => (
<Fragment key={group.category?.id || 'no-category'}>
<TableRow className="bg-slate-100 dark:bg-slate-800/40 hover:bg-slate-100 dark:hover:bg-slate-800/40 border-b border-slate-200 dark:border-white/10">
<TableCell colSpan={5} className="text-primary font-bold py-2.5 text-xs uppercase tracking-wider">
{group.category ? group.category.name : 'Keine Kategorie'}
</TableCell>
</TableRow>
{group.products.map((product) => renderProductRow(product))}
</Fragment>
))
) : (
filteredProducts.map((product) => renderProductRow(product))
)}
{filteredProducts.length === 0 && (
<TableRow>
<TableCell colSpan={5} className="text-center py-10 text-slate-500 dark:text-slate-400">
Keine Produkte gefunden. Passen Sie Ihre Filter an.
</TableCell>
</TableRow> </TableRow>
)} </TableHeader>
</TableBody> <TableBody>
</Table> {isGroupedByCategory ? (
groupedProducts.map((group) => (
<Fragment key={group.category?.id || 'no-category'}>
<TableRow className="bg-slate-100 dark:bg-slate-800/40 hover:bg-slate-100 dark:hover:bg-slate-800/40 border-b border-slate-200 dark:border-white/10">
<TableCell colSpan={5} className="text-primary font-bold py-2.5 text-xs uppercase tracking-wider">
{group.category ? group.category.name : 'Keine Kategorie'}
</TableCell>
</TableRow>
{group.products.map((product) => renderProductRow(product))}
</Fragment>
))
) : (
filteredProducts.map((product) => renderProductRow(product))
)}
{filteredProducts.length === 0 && (
<TableRow>
<TableCell colSpan={5} className="text-center py-10 text-slate-500 dark:text-slate-400">
Keine Produkte gefunden. Passen Sie Ihre Filter an.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
</CardContent> </CardContent>
</Card> </Card>