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