File size: 3,979 Bytes
9470652 | 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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | import { useState } from "react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@catalyst/table";
import { CustomTooltip } from "./Tooltip";
import {
ArrowsPointingInIcon,
ArrowsPointingOutIcon,
MinusIcon,
ArrowDownTrayIcon,
} from "@heroicons/react/24/outline";
import Minimizer from "../Minimizer/Minimizer";
import { useExportData } from "@/hooks/messages";
// TODO: Remove after defining this better on backend
export const DynamicTable: React.FC<{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
data: { columns: string[]; rows: any[][] };
initialCreatedAt?: Date;
minimize?: boolean;
linked_id?: string;
}> = ({ data, minimize, linked_id }) => {
const [minimized, setMinimized] = useState(minimize || false);
const [limitedView, setLimitedView] = useState(true);
const { mutate: exportData } = useExportData();
const handleExpand = () => {
if (minimized) setMinimized(false);
else if (limitedView) setLimitedView(false);
};
return (
<Minimizer
minimized={minimized}
setMinimized={setMinimized}
label="Data results"
classes="bg-gray-800"
>
<div className="relative">
<Table
grid
bleed
striped
dense
maxRows={limitedView ? 5 : data.rows.length + 10}
className="ml-0 mr-0 [--gutter:theme(spacing.6)]"
>
<TableHead>
<TableRow>
{data.columns.map((header: string, index: number) => (
<TableHeader key={index}>{header}</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{data.rows.map((row: string[] | number[], index: number) => {
return (
<TableRow key={index}>
{row.map((item: string | number, cellIndex: number) => (
<TableCell key={cellIndex} className="font-medium pl-8">
{item}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
<div className="absolute bottom-0 right-0 m-2 flex gap-1">
{/* Minimize Icon */}
<CustomTooltip hoverText="Minimize">
{/* On minimize, also collapse if already expanded */}
<button
tabIndex={-1}
onClick={() => {
setMinimized(true);
setLimitedView(true);
}}
className="p-1"
>
<MinusIcon className="w-6 h-6 [&>path]:stroke-[2]" />
</button>
</CustomTooltip>
{data.rows.length > 4 && // 4 data rows + 1 header (columns) row
(limitedView ? (
/* Expand Icon */
<CustomTooltip hoverText="Expand">
<button tabIndex={-1} onClick={handleExpand} className="p-1">
<ArrowsPointingOutIcon className="w-6 h-6 [&>path]:stroke-[2]" />
</button>
</CustomTooltip>
) : (
/* Contract Icon */
<CustomTooltip hoverText="Collapse">
<button
tabIndex={-1}
onClick={() => setLimitedView(true)}
className="p-1"
>
<ArrowsPointingInIcon className="w-6 h-6 [&>path]:stroke-[2]" />
</button>
</CustomTooltip>
))}
{data.rows.length > 1 && linked_id && (
<CustomTooltip hoverText="Export">
<button
tabIndex={-1}
onClick={() => exportData(linked_id)}
className="p-1"
>
<ArrowDownTrayIcon className="w-6 h-6 [&>path]:stroke-[2]" />
</button>
</CustomTooltip>
)}
</div>
</div>
</Minimizer>
);
};
|