Started multi-part response viewer

src-web/components/responseViewers/CsvViewer.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import Papa from 'papaparse';
 import { useMemo } from 'react';
 import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table';
 
 interface Props {
   response: HttpResponse;
@@ -11,31 +12,42 @@ interface Props {
 
 export function CsvViewer({ response, className }: Props) {
   const body = useResponseBodyText({ response, filter: null });
+  return (
+    <div className="overflow-auto h-full">
+      <CsvViewerInner text={body.data ?? null} className={className} />
+    </div>
+  );
+}
 
+export function CsvViewerInner({ text, className }: { text: string | null; className?: string }) {
   const parsed = useMemo(() => {
-    if (body.data == null) return null;
-    return Papa.parse<string[]>(body.data);
-  }, [body]);
+    if (text == null) return null;
+    return Papa.parse<Record<string, string>>(text, { header: true, skipEmptyLines: true });
+  }, [text]);
 
   if (parsed === null) return null;
 
   return (
     <div className="overflow-auto h-full">
-      <table className={classNames(className, 'text-sm')}>
-        <tbody>
+      <Table className={classNames(className, 'text-sm')}>
+        <TableHead>
+          <TableRow>
+            {parsed.meta.fields?.map((field) => (
+              <TableHeaderCell key={field}>{field}</TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {parsed.data.map((row, i) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: none
-            <tr key={i} className={classNames('border-l border-t', i > 0 && 'border-b')}>
-              {row.map((col, j) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: none
-                <td key={j} className="border-r px-1.5">
-                  {col}
-                </td>
+            <TableRow key={i}>
+              {parsed.meta.fields?.map((key) => (
+                <TableCell key={key}>{row[key] ?? ''}</TableCell>
               ))}
-            </tr>
+            </TableRow>
           ))}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     </div>
   );
 }