1import {
2 flexRender,
3 getCoreRowModel,
4 useReactTable,
5 getSortedRowModel,
6} from "@tanstack/react-table";
7import { BenchmarkResult } from "../../../types";
8import { columns } from "./columns";
9import { BenchmarkCharts } from "../charts/BenchmarkCharts";
10import { exportToCsv } from "../export/csvExport";
11import { useBenchmarkChartData } from "../../../hooks/useBenchmarkChartData";
13interface BenchmarkTableProps {
14 results: BenchmarkResult[];
15}
17export function BenchmarkTable({ results }: BenchmarkTableProps) {
18 const table = useReactTable({
19 data: results,
20 columns,
21 getCoreRowModel: getCoreRowModel(),
22 getSortedRowModel: getSortedRowModel(),
23 });
25 const chartData = useBenchmarkChartData(results, "", "");
27 return (
28 <div className="table-container">
29 {chartData.length > 0 && <BenchmarkCharts chartData={chartData} />}
31 <table>
32 <thead>
33 {table.getHeaderGroups().map((headerGroup) => (
34 <tr key={headerGroup.id}>
35 {headerGroup.headers.map((header) => (
36 <th
37 key={header.id}
38 onClick={header.column.getToggleSortingHandler()}
39 style={{ cursor: "pointer" }}
40 >
41 {flexRender(
42 header.column.columnDef.header,
43 header.getContext(),
44 )}
45 {header.column.getIsSorted() && (
46 <span style={{ marginLeft: "4px" }}>
47 {header.column.getIsSorted() === "asc" ? "↑" : "↓"}
48 </span>
49 )}
50 </th>
51 ))}
52 </tr>
53 ))}
54 </thead>
55 <tbody>
56 {table.getRowModel().rows.map((row) => (
57 <tr key={row.id}>
58 {row.getVisibleCells().map((cell) => (
59 <td key={cell.id}>
60 {flexRender(cell.column.columnDef.cell, cell.getContext())}
61 </td>
62 ))}
63 </tr>
64 ))}
65 </tbody>
66 </table>
68 <div
69 style={{
70 marginTop: "12px",
71 display: "flex",
72 justifyContent: "flex-end",
73 }}
74 >
75 <button
76 onClick={() => exportToCsv(results, "benchmark_results")}
77 style={{
78 padding: "8px 16px",
79 backgroundColor: "#4CAF50",
80 color: "white",
81 border: "none",
82 borderRadius: "4px",
83 cursor: "pointer",
84 display: "flex",
85 alignItems: "center",
86 gap: "8px",
87 }}
88 >
89 <svg
90 width="16"
91 height="16"
92 viewBox="0 0 16 16"
93 fill="none"
94 xmlns="http://www.w3.org/2000/svg"
95 >
96 <path d="M8 12L3 7H6V1H10V7H13L8 12Z" fill="currentColor" />
97 <path d="M2 14V15H14V14H2Z" fill="currentColor" />
98 </svg>
99 Download CSV
100 </button>
101 </div>
102 </div>
103 );
104}