2 flexRender,
3 getCoreRowModel,
4 useReactTable,
5 getSortedRowModel,
7import { BenchmarkResult } from "../../../types";
8import { columns } from "./columns";
9import { BenchmarkCharts } from "../charts/BenchmarkCharts";
10import { exportToCsv } from "../export/csvExport";
3b1d188improve uiJeremy Magland 11import { useBenchmarkChartData } from "../../../hooks/useBenchmarkChartData";
eacabc8test real dataJeremy Magland 12
14 results: BenchmarkResult[];
15}
eacabc8test real dataJeremy Magland 16
3b1d188improve uiJeremy Magland 17export function BenchmarkTable({ results }: BenchmarkTableProps) {
21 getCoreRowModel: getCoreRowModel(),
22 getSortedRowModel: getSortedRowModel(),
23 });
eacabc8test real dataJeremy Magland 26
27 return (
28 <div className="table-container">
3b1d188improve uiJeremy Magland 29 {chartData.length > 0 && <BenchmarkCharts chartData={chartData} />}
31 <table>
32 <thead>
37 key={header.id}
38 onClick={header.column.getToggleSortingHandler()}
41 {flexRender(
42 header.column.columnDef.header,
45 {header.column.getIsSorted() && (
47 {header.column.getIsSorted() === "asc" ? "↑" : "↓"}
49 )}
50 </th>
51 ))}
52 </tr>
53 ))}
54 </thead>
55 <tbody>
60 {flexRender(cell.column.columnDef.cell, cell.getContext())}
61 </td>
62 ))}
63 </tr>
64 ))}
65 </tbody>
66 </table>
69 style={{
70 marginTop: "12px",
71 display: "flex",
72 justifyContent: "flex-end",
73 }}
74 >
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>
103 );
104}