91 lines
3.4 KiB
JavaScript
91 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Search, Loader2, Database } from "lucide-react";
|
|
|
|
/**
|
|
* Wrapper sobre o Table do Shadcn com busca local e suporte a loading.
|
|
* @param {{ columns: string[], data: any[], searchKey: string, loading?: boolean, renderRow: Function }} props
|
|
*/
|
|
export const DataTable = ({ columns, data, searchKey, renderRow, loading = false }) => {
|
|
const [searchTerm, setSearchTerm] = React.useState("");
|
|
|
|
const filteredData = React.useMemo(() => {
|
|
if (!searchTerm) return data;
|
|
return data.filter(item =>
|
|
String(item[searchKey]).toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
}, [data, searchTerm, searchKey]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="relative max-w-sm">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={18} />
|
|
<Input
|
|
placeholder="Pesquisar..."
|
|
className="pl-10"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
<div className="rounded-xl border bg-card overflow-hidden relative">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-muted/50 hover:bg-muted/50">
|
|
{columns.map(col => (
|
|
<TableHead key={col} className="font-semibold">{col}</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="h-32 text-center">
|
|
<div className="flex flex-col items-center justify-center gap-3">
|
|
<div className="relative">
|
|
<div className="w-10 h-10 border-4 border-slate-200 dark:border-[#252525] border-t-emerald-500 rounded-full animate-spin"></div>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
<span className="text-sm font-medium text-slate-600 dark:text-slate-400">
|
|
Carregando dados...
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : filteredData.length > 0 ? (
|
|
filteredData.map((item, index) => renderRow(item, index))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="h-32 text-center">
|
|
<div className="flex flex-col items-center justify-center gap-3 text-muted-foreground">
|
|
<Database size={32} className="opacity-30" />
|
|
<div className="flex flex-col gap-1">
|
|
<span className="font-semibold">Nenhum registro encontrado</span>
|
|
{searchTerm && (
|
|
<span className="text-xs">
|
|
Tente ajustar os filtros de busca
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|