From dceebb0fc9f9ed3d5548b1b28ed26c8f49415ae5 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 18 Feb 2022 11:58:18 +0000 Subject: [PATCH] Completely rewrite BBUI table with divs and with support for custom column widths --- packages/bbui/src/Table/BoldRenderer.svelte | 4 + packages/bbui/src/Table/CellRenderer.svelte | 1 + packages/bbui/src/Table/CodeRenderer.svelte | 9 + .../bbui/src/Table/DateTimeRenderer.svelte | 4 +- .../bbui/src/Table/InternalRenderer.svelte | 8 - packages/bbui/src/Table/StringRenderer.svelte | 3 +- packages/bbui/src/Table/Table.svelte | 436 +++++++++--------- 7 files changed, 240 insertions(+), 225 deletions(-) diff --git a/packages/bbui/src/Table/BoldRenderer.svelte b/packages/bbui/src/Table/BoldRenderer.svelte index ea882d538e..242270104f 100644 --- a/packages/bbui/src/Table/BoldRenderer.svelte +++ b/packages/bbui/src/Table/BoldRenderer.svelte @@ -7,5 +7,9 @@ diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte index 9a53fd0169..6fefd0f774 100644 --- a/packages/bbui/src/Table/CellRenderer.svelte +++ b/packages/bbui/src/Table/CellRenderer.svelte @@ -28,6 +28,7 @@ $: type = schema?.type ?? "string" $: customRenderer = customRenderers?.find(x => x.column === schema?.name) $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer + $: width = schema?.width || "150px" {#if renderer && (customRenderer || (value != null && value !== ""))} diff --git a/packages/bbui/src/Table/CodeRenderer.svelte b/packages/bbui/src/Table/CodeRenderer.svelte index a75bec663c..481de2b672 100644 --- a/packages/bbui/src/Table/CodeRenderer.svelte +++ b/packages/bbui/src/Table/CodeRenderer.svelte @@ -3,3 +3,12 @@ {value} + + diff --git a/packages/bbui/src/Table/DateTimeRenderer.svelte b/packages/bbui/src/Table/DateTimeRenderer.svelte index ff750cecd8..5d856968e7 100644 --- a/packages/bbui/src/Table/DateTimeRenderer.svelte +++ b/packages/bbui/src/Table/DateTimeRenderer.svelte @@ -17,6 +17,8 @@ diff --git a/packages/bbui/src/Table/InternalRenderer.svelte b/packages/bbui/src/Table/InternalRenderer.svelte index 858d51f128..7e2dd0b2aa 100644 --- a/packages/bbui/src/Table/InternalRenderer.svelte +++ b/packages/bbui/src/Table/InternalRenderer.svelte @@ -43,11 +43,3 @@
- - diff --git a/packages/bbui/src/Table/StringRenderer.svelte b/packages/bbui/src/Table/StringRenderer.svelte index 6fd731f5ec..dc5c85acf3 100644 --- a/packages/bbui/src/Table/StringRenderer.svelte +++ b/packages/bbui/src/Table/StringRenderer.svelte @@ -8,6 +8,7 @@ div { overflow: hidden; text-overflow: ellipsis; - width: 150px; + white-space: nowrap; + max-width: 200px; } diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index a40ec2a45b..7022fa6aba 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -30,6 +30,7 @@ export let disableSorting = false const dispatch = createEventDispatcher() + rowCount = 8 // Config const rowHeight = 55 @@ -45,11 +46,12 @@ let loaded = false $: schema = fixSchema(schema) $: if (!loading) loaded = true - $: rows = data ?? [] + $: fields = getFields(schema, showAutoColumns) + $: rows = fields?.length ? data || [] : [] $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount) $: contentStyle = getContentStyle(visibleRowCount, rowCount) $: sortedRows = sortRows(rows, sortColumn, sortOrder) - $: fields = getFields(schema, showAutoColumns) + $: gridStyle = getGridStyle(fields, schema, showEditColumn) $: showEditColumn = allowEditRows || allowSelectRows // Scrolling state @@ -107,6 +109,23 @@ return `height: ${headerHeight + visibleRows * (rowHeight + 1)}px;` } + const getGridStyle = (fields, schema, showEditColumn) => { + let style = "grid-template-columns:" + if (showEditColumn) { + style += " auto" + } + fields?.forEach(field => { + const fieldSchema = schema[field] + if (fieldSchema.width) { + style += ` ${fieldSchema.width}` + } else { + style += " minmax(auto, 1fr)" + } + }) + style += ";" + return style + } + const sortRows = (rows, sortColumn, sortOrder) => { if (!sortColumn || !sortOrder || disableSorting) { return rows @@ -215,168 +234,187 @@ } -
+
{#if !loaded}
{:else}
-
- - {#if fields.length} - - - {#if showEditColumn} - - {/if} - {#each fields as field} - - {/each} - - - {/if} - - {#if sortedRows?.length && fields.length} - {#each sortedRows as row, idx} - dispatch("click", row)} - on:click={() => toggleSelectRow(row)} - class="spectrum-Table-row" - class:hidden={idx < firstVisibleRow || idx > lastVisibleRow} + {#if fields.length} + {#if showEditColumn} +
+ {editColumnTitle || ""} +
+ {/if} + {#each fields as field} +
sortBy(schema[field])} + > +
+
{getDisplayName(schema[field])}
+ {#if schema[field]?.autocolumn} + - {#if idx >= firstVisibleRow && idx <= lastVisibleRow} - {#if showEditColumn} - -
- toggleSelectRow(row)} - onEdit={e => editRow(e, row)} - {allowSelectRows} - {allowEditRows} - /> -
- - {/if} - {#each fields as field} -
- {/each} - {/if} - + + + {/if} + {#if sortColumn === field} + + {/if} + {#if allowEditColumns && schema[field]?.editable !== false} + editColumn(e, field)} + > + + + {/if} + + + {/each} + {/if} + {#if sortedRows?.length} + {#each sortedRows as row, idx} +
dispatch("click", row)} + on:click={() => toggleSelectRow(row)} + > + {#if idx >= firstVisibleRow && idx <= lastVisibleRow} + {#if showEditColumn} +
+ toggleSelectRow(row)} + onEdit={e => editRow(e, row)} + {allowSelectRows} + {allowEditRows} + /> +
+ {/if} + {#each fields as field} +
+ + + +
{/each} {:else} -
- {#if showEditColumn} - +
{/if} -
-
-
- {editColumnTitle || ""} -
-
sortBy(schema[field])} - > -
-
{getDisplayName(schema[field])}
- {#if schema[field]?.autocolumn} - - - - {/if} - {#if sortColumn === field} - - {/if} - {#if allowEditColumns && schema[field]?.editable !== false} - editColumn(e, field)} - > - - - {/if} -
-
-
- - - -
-
- {/if} - {#each fields as field} - - {/each} -
0}> -
- - - -
No rows found
-
-
-
-
+
+ {/each} + {:else} +
+
+ + + +
No rows found
+
+
+ {/if}
{/if}