aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/Table.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/lib/Table.svelte')
-rw-r--r--fe/src/lib/Table.svelte61
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 @@
1<script lang="ts"> 1<script lang="ts">
2 export let data; 2import {afterUpdate} from 'svelte';
3 export let nofooter: boolean = false; 3export let data: Array<any> | undefined = undefined;
4 export let noheader: boolean = false; 4export let nofooter: boolean = false;
5 export let title: string; 5export let noheader: boolean = false;
6export let omit: string[] = ['id'];
7export let title: string | undefined = undefined;
8
9function getDataKeys(data: any[]): string[] {
10 if (!data || data.length === 0) return [];
11 return Object.keys(data[0]).map(k => k.split('_').join(' ')).filter(k => !omit.includes(k));
12}
13
14function getRow(row: Record<string, any>): Array<any> {
15 return Object.entries(row).filter(r => !omit.includes(r[0]));
16}
17
18const formatter = new Intl.DateTimeFormat('en', {
19 year: 'numeric',
20 month: 'numeric',
21 day: 'numeric',
22 hour: 'numeric',
23 minute: '2-digit',
24 second: '2-digit',
25 timeZone: "America/New_York"
26});
27
28function formatDatum([key, value]: any[]) {
29 if (key === 'date') {
30 const parsedDate = new Date(value);
31 return formatter.format(parsedDate);
32 }
33 return value;
34}
35
6</script> 36</script>
7<table> 37<table>
8 {#if title} 38 {#if title}
@@ -11,16 +41,27 @@
11 {#if !noheader} 41 {#if !noheader}
12 <thead> 42 <thead>
13 <tr> 43 <tr>
14 <th> 44 {#each getDataKeys(data) as header}
15 Data Header 45 <th>{header}</th>
16 </th> 46 {/each}
17 </tr> 47 </tr>
18 </thead> 48 </thead>
19 {/if} 49 {/if}
20 <tbody> 50 <tbody>
51 {#if data}
52 {#each data as row}
21 <tr> 53 <tr>
22 <td>Data</td> 54 {#each getRow(row) as datum}
55
56 <td>{formatDatum(datum)}</td>
57 {/each}
23 </tr> 58 </tr>
59 {/each}
60 {:else}
61 <tr>
62 There is not data.
63 </tr>
64 {/if}
24 </tbody> 65 </tbody>
25 {#if !nofooter} 66 {#if !nofooter}
26 <slot name="footer"> 67 <slot name="footer">
@@ -38,4 +79,8 @@ table {
38 margin: 8px; 79 margin: 8px;
39 border: solid 1px black; 80 border: solid 1px black;
40} 81}
82
83th {
84 text-transform: capitalize;
85}
41</style> 86</style>