1 files changed, 53 insertions, 8 deletions

diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 2df9f8c..5572280 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -1,8 +1,38 @@
 <script lang="ts">
-    export let data;
-    export let nofooter: boolean = false;
-    export let noheader: boolean = false;
-    export let title: string;
+import {afterUpdate} from 'svelte';
+export let data: Array<any> | undefined = undefined;
+export let nofooter: boolean = false;
+export let noheader: boolean = false;
+export let omit: string[] = ['id'];
+export let title: string | undefined = undefined;
+
+function getDataKeys(data: any[]): string[] {
+    if (!data || data.length === 0) return [];
+    return Object.keys(data[0]).map(k => k.split('_').join(' ')).filter(k => !omit.includes(k));
+}
+
+function getRow(row: Record<string, any>): Array<any> {
+   return Object.entries(row).filter(r => !omit.includes(r[0]));
+}
+
+const formatter = new Intl.DateTimeFormat('en', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZone: "America/New_York"
+});
+
+function formatDatum([key, value]: any[]) {
+    if (key === 'date') {
+        const parsedDate = new Date(value);
+        return formatter.format(parsedDate);
+    }
+    return value;
+}
+
 </script>
 <table>
     {#if title}
@@ -11,16 +41,27 @@
     {#if !noheader}
     <thead>
         <tr>
-            <th>
-                Data Header
-            </th>
+            {#each getDataKeys(data) as header}
+                <th>{header}</th>
+            {/each}
         </tr>
     </thead>
     {/if}
     <tbody>
+        {#if data}
+        {#each data as row}
         <tr>
-            <td>Data</td>
+            {#each getRow(row) as datum}
+            
+            <td>{formatDatum(datum)}</td>
+            {/each}
         </tr>
+        {/each}
+        {:else}
+        <tr>
+            There is not data.
+        </tr>   
+        {/if}
     </tbody>
     {#if !nofooter}
     <slot name="footer">
@@ -38,4 +79,8 @@ table {
     margin: 8px;
     border: solid 1px black;
 }
+
+th {
+    text-transform: capitalize;
+}
 </style>