From fdd87658586a0ee2f36c8bb56df64b01e113636a Mon Sep 17 00:00:00 2001 From: Romein van Buren Date: Sun, 15 Jan 2023 16:15:23 +0100 Subject: [PATCH] Refinements in grid.svelte --- frontend/src/components/grid.svelte | 34 +++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte index 6bf3cd6..786dd8f 100644 --- a/frontend/src/components/grid.svelte +++ b/frontend/src/components/grid.svelte @@ -62,6 +62,25 @@ select(item[key]); contextMenu.show(evt, item.menu); } + + function formatValue(value) { + if (Array.isArray(value)) { + return '[...]'; + } + if (typeof value === 'object') { + return '{...}'; + } + if (value === undefined || value === null) { + return ''; + } + if (typeof value === 'number' || typeof value === 'boolean') { + return String(value); + } + if (String(value).length <= 1000) { + return value; + } + return String(value).slice(0, 1000) + '…'; + }
0} class:contained> @@ -77,6 +96,13 @@ {/if} + + + {#each columns as column} + + {/each} + + {#if showHeaders && columns.some(col => col.title)} @@ -106,10 +132,8 @@ {#each columns as column} {@const value = item[column.key]} - {/each} @@ -161,6 +185,7 @@ table { border-collapse: collapse; width: 100%; + /* table-layout: fixed; */ } table thead { @@ -178,6 +203,7 @@ td, th { padding: 0.3rem; + text-overflow: ellipsis; } td.has-toggle { width: calc(20px + 0.3rem);
- {#if typeof value !== 'object'} - {value || ''} - {/if} + + {formatValue(value)}