Span Data Table

;\n}\n\nfunction TableHeader({ children }: { children: React.ReactNode }) {\n return {children};\n}\n\nfunction TableBody({ children }: { children: React.ReactNode }) {\n return {children};\n}\n\nfunction TableRow(\n { children, className }: { children: React.ReactNode; className?: string },\n) {\n return {children};\n}\n\nfunction TableHead({ children }: { children: React.ReactNode }) {\n return {children};\n}\n\nfunction TableCell({ children }: { children: React.ReactNode }) {\n return {children};\n}\n\nfunction App() {\n const [data, setData] = useState[]>([\n {\n id: \"initial-sample\",\n input:\n \"An orphaned boy discovers he's a wizard on his 11th birthday when Hagrid escorts him to magic-teaching Hogwarts School.\",\n output: \"Harry Potter and the Philosopher's Stone\",\n expected: \"Harry Potter and the Sorcerer's Stone\",\n metadata: null,\n },\n ]);\n\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n try {\n const message = messageSchema.parse(event.data);\n if (message.type === \"data\") {\n // Handle both array and string input, converting to array if needed\n const inputData = Array.isArray(message.data.input)\n ? message.data.input\n : [{ input: message.data.input }];\n\n // Transform the input to include all properties from the message\n const transformedData = inputData.map((item) => ({\n span_id: message.data.span_id,\n input: item.input || message.data.input,\n output: message.data.output,\n expected: message.data.expected,\n metadata: message.data.metadata,\n }));\n\n setData(transformedData);\n }\n } catch (error) {\n console.error(\"Invalid message received:\", error);\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n\n return () => {\n window.removeEventListener(\"message\", handleMessage);\n };\n }, []);\n\n const headers = useMemo(\n () => (data.length > 0 ? Object.keys(data[0]) : []),\n [data],\n );\n\n if (data.length === 0) {\n return

No data

;\n }\n\n return (\n

\n \n \n \n {headers.map((header) => (\n {header}\n ))}\n \n \n \n {data.map((row, i) => (\n \n {headers.map((header) => (\n \n {row[header] === null\n ? \"null\"\n : row[header] === undefined\n ? \"undefined\"\n : typeof row[header] === \"string\"\n ? row[header]\n : JSON.stringify(row[header])}\n \n ))}\n \n ))}\n \n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Span Data Table\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/jmccollum/br-iframe/code/main.tsx","extension","actionData","errors"]