Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/ahuora-design-system/ui/table";
import { ScrollArea, ScrollBar } from "@/ahuora-design-system/ui/scroll-area";
export function GenericDataViewer({ data }: { data: Record<string, any>[] }) {
Iif (!data || data.length === 0) {
return (
<p className="text-center text-sm text-muted-foreground">
No data available.
</p>
);
}
const columns: ColumnDef<Record<string, any>>[] = Object.keys(data[0]).map(
(key) => ({
accessorKey: key,
header: key,
cell: (info) => info.getValue(),
}),
);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
});
return (
<div className="h-full max-h-[70vh] border rounded-md">
<ScrollArea className="w-full h-full">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
<ScrollBar orientation="vertical" />
</ScrollArea>
</div>
);
}
|