82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { useMobileResponsive, getTableResponsiveClasses } from '@/hooks/useMobileResponsive';
|
|
|
|
interface ResponsiveTableProps {
|
|
headers: string[];
|
|
data: any[];
|
|
renderRow: (item: any, index: number) => React.ReactNode;
|
|
renderMobileCard?: (item: any, index: number) => React.ReactNode;
|
|
emptyMessage?: string;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function ResponsiveTable({
|
|
headers,
|
|
data,
|
|
renderRow,
|
|
renderMobileCard,
|
|
emptyMessage = "Nenhum item encontrado",
|
|
loading = false
|
|
}: ResponsiveTableProps) {
|
|
const { isMobile } = useMobileResponsive();
|
|
const tableClasses = getTableResponsiveClasses(isMobile);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center p-8">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
return (
|
|
<div className="flex items-center justify-center p-8 text-muted-foreground">
|
|
{emptyMessage}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Mobile card view
|
|
if (isMobile && renderMobileCard) {
|
|
return (
|
|
<div className="space-y-3">
|
|
{data.map((item, index) => (
|
|
<Card key={index} className="mobile-card">
|
|
<CardContent className="p-4">
|
|
{renderMobileCard(item, index)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Desktop/Tablet table view
|
|
return (
|
|
<div className={tableClasses.container}>
|
|
<Table className={tableClasses.table}>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{headers.map((header, index) => (
|
|
<TableHead key={index} className={tableClasses.header}>
|
|
{header}
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{data.map((item, index) => (
|
|
<TableRow key={index}>
|
|
{renderRow(item, index)}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|