HaiLin/ai-ticket-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: polish shadcn data table shell

Browse Source
This commit is contained in:
hailin
2026-07-02 15:44:46 +08:00
parent be7edae94f
commit a16e0be5b1
1 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/components/app/AppDataTable.tsx
View File

@@ -1,6 +1,7 @@
import type * as React from 'react'
import { AppEmptyState } from '@/components/app/AppEmptyState'
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { cn } from '@/lib/utils'
@@ -35,41 +36,49 @@ export function AppDataTable<Row>({
onRowClick
}: AppDataTableProps<Row>) {
return (
<div className="overflow-hidden rounded-lg border border-border bg-card shadow-sm">
{toolbar ? <div className="border-b border-border bg-muted/20 p-3">{toolbar}</div> : null}
{rows.length === 0 ? (
<div className="p-4">
<AppEmptyState title={emptyTitle} description={emptyDescription} />
</div>
) : (
<Table className={tableClassName}>
<TableHeader className="bg-muted/30">
<TableRow>
{columns.map((column) => (
<TableHead key={column.key} className={column.className}>
{column.header}
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{rows.map((row) => (
<TableRow
key={getRowKey(row)}
className={cn(onRowClick ? 'cursor-pointer' : undefined)}
onClick={() => onRowClick?.(row)}
>
<Card className="gap-0 py-0">
{toolbar ? <CardHeader className="border-b border-border bg-muted/20 p-3">{toolbar}</CardHeader> : null}
<CardContent className="p-0">
{rows.length === 0 ? (
<div className="p-3">
<AppEmptyState title={emptyTitle} description={emptyDescription} />
</div>
) : (
<Table className={cn('min-w-[720px]', tableClassName)}>
<TableHeader className="bg-muted/40">
<TableRow>
{columns.map((column) => (
<TableCell key={column.key} className={column.className}>
{column.cell(row)}
</TableCell>
<TableHead key={column.key} className={column.className}>
{column.header}
</TableHead>
))}
</TableRow>
))}
</TableBody>
</Table>
)}
{footer ? <div className="border-t border-border bg-muted/20 px-3 py-2">{footer}</div> : null}
</div>
</TableHeader>
<TableBody>
{rows.map((row) => (
<TableRow
key={getRowKey(row)}
tabIndex={onRowClick ? 0 : undefined}
className={cn(onRowClick ? 'cursor-pointer focus-visible:bg-muted focus-visible:outline-none' : undefined)}
onClick={() => onRowClick?.(row)}
onKeyDown={(event) => {
if (event.target !== event.currentTarget || !onRowClick || (event.key !== 'Enter' && event.key !== ' ')) return
event.preventDefault()
onRowClick(row)
}}
>
{columns.map((column) => (
<TableCell key={column.key} className={column.className}>
{column.cell(row)}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
)}
</CardContent>
{footer ? <CardFooter className="bg-muted/20 px-3 py-2 [&>*]:w-full">{footer}</CardFooter> : null}
</Card>
)
}