Spaces:
Running
Running
import React from 'react' | |
interface ExampleVariantMetricsTableProps { | |
variantMetadatas: Record<string, Record<string, string | number | boolean>> | |
} | |
const ExampleVariantMetricsTable: React.FC<ExampleVariantMetricsTableProps> = ({ | |
variantMetadatas, | |
}) => { | |
const variantKeys = Object.keys(variantMetadatas) | |
if (variantKeys.length === 0) return null | |
// Collect all unique metadata keys across all variants | |
let allKeys = Array.from( | |
new Set(variantKeys.flatMap((variant) => Object.keys(variantMetadatas[variant] || {}))) | |
) | |
// Move 'detected' to the front if present | |
allKeys = allKeys.filter((k) => k !== 'detected') | |
allKeys.unshift('detected') | |
return ( | |
<div className="overflow-x-auto"> | |
<table className="table w-full min-w-max border-gray-700 border text-xs"> | |
<thead> | |
<tr> | |
<th className="bg-base-100 border-gray-700 border">Variant</th> | |
{allKeys.map((k) => ( | |
<th key={k} className="bg-base-100 border-gray-700 border text-center"> | |
{k} | |
</th> | |
))} | |
</tr> | |
</thead> | |
<tbody> | |
{variantKeys.map((variant) => ( | |
<tr key={variant} className="hover:bg-base-100"> | |
<td className="font-mono border-gray-700 border">{variant}</td> | |
{allKeys.map((k) => ( | |
<td key={k} className="border-gray-700 border text-center"> | |
{variantMetadatas[variant] && k in variantMetadatas[variant] | |
? String(variantMetadatas[variant][k]) | |
: ''} | |
</td> | |
))} | |
</tr> | |
))} | |
</tbody> | |
</table> | |
</div> | |
) | |
} | |
export default ExampleVariantMetricsTable | |