Prettify CSV display

web/src/fileManager/FileContent.tsx

@@ -1,5 +1,6 @@
 import { Accessor, Component, createResource, JSXElement } from "solid-js";
 import { apiHost } from "../consts";
+import { PrettifyCSV } from "./PrettifyCSV";
 
 export const FileContent: Component<{getFileName: Accessor<string>}> = (props) => {
     const fetchFileContent = async (fileName: string) => {
@@ -11,6 +12,7 @@ export const FileContent: Component<{getFileName: Accessor<string>}> = (props) =
     }
 
     const [contentResource] = createResource(props.getFileName, fetchFileContent);
+    const lines = () => contentResource()?.split("<br/>") ?? ["empty..."];
     
     return (
         <div>
@@ -24,15 +26,8 @@ export const FileContent: Component<{getFileName: Accessor<string>}> = (props) =
                 <div>Error while loading file content: ${contentResource.error}</div>
             )}
             { contentResource() && (
-                <div>{splitLines(contentResource())}</div>
+                <PrettifyCSV lines={lines} />
             )}
         </div>
     )
-}
-
-function splitLines(str?: string): JSXElement {
-    const lines = str?.split("<br/>") ?? ["empty..."]
-    return lines.map(line =>
-        <div>{line}</div>
-    );
 }

web/src/fileManager/PrettifyCSV.tsx

@@ -0,0 +1,26 @@
+import { Component } from "solid-js";
+
+export const PrettifyCSV: Component<{lines: () => string[];}> = ({ lines }) => {
+    const header = () => lines().slice(0, 1);
+    const content = () => lines().slice(1) ?? [];
+    return (
+        <div>
+            <div>{header()}</div>
+            <table>
+                {content().map(line => <PrettifyLine line={line}/>)}
+            </table>
+        </div>
+    )
+}
+
+const PrettifyLine: Component<{line: string;}> = ({ line }) => {
+    const splitLine = line.split(";");
+    const params = splitLine.slice(0, 15);
+    const phenomena = splitLine.slice(15);
+    return (
+        <tr>
+            { params.map(param => <td>{param}</td>)}
+            <td>{ phenomena.join(",") }</td>
+        </tr>
+    )
+}