diff options
Diffstat (limited to 'fe/src/lib/Table.svelte')
-rw-r--r-- | fe/src/lib/Table.svelte | 61 |
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; | 2 | import {afterUpdate} from 'svelte'; |
3 | export let nofooter: boolean = false; | 3 | export let data: Array<any> | undefined = undefined; |
4 | export let noheader: boolean = false; | 4 | export let nofooter: boolean = false; |
5 | export let title: string; | 5 | export let noheader: boolean = false; |
6 | export let omit: string[] = ['id']; | ||
7 | export let title: string | undefined = undefined; | ||
8 | |||
9 | function 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 | |||
14 | function getRow(row: Record<string, any>): Array<any> { | ||
15 | return Object.entries(row).filter(r => !omit.includes(r[0])); | ||
16 | } | ||
17 | |||
18 | const 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 | |||
28 | function 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 | |||
83 | th { | ||
84 | text-transform: capitalize; | ||
85 | } | ||
41 | </style> | 86 | </style> |