diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index d002b4c939..973756bf4a 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -15,7 +15,7 @@ export let allowEditColumns = true export let selectedRows = [] export let customColumnRenderer = SelectEditRenderer - export let customColumnTitle + export let customColumnTitle = null export let customRenderers = [] const dispatch = createEventDispatcher() @@ -87,7 +87,8 @@ const getFields = (schema, showAutoColumns) => { let columns = [] let autoColumns = [] - Object.entries(schema).forEach(([field, fieldSchema]) => { + Object.entries(schema || {}).forEach(([field, fieldSchema]) => { + schema[field].name = field if (!fieldSchema?.autocolumn) { columns.push(field) } else if (showAutoColumns) { @@ -200,39 +201,51 @@ - {#each sortedRows as row, idx} - toggleSelectRow(row)} - class="spectrum-Table-row" - class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}> - {#if idx >= firstVisibleRow && idx <= lastVisibleRow} - {#if customColumnRenderer} - -
- toggleSelectRow(row)} - onEdit={e => editRow(e, row)} - {allowSelectRows} - {allowEditRows} /> -
- + {#if sortedRows?.length} + {#each sortedRows as row, idx} + toggleSelectRow(row)} + class="spectrum-Table-row" + class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}> + {#if idx >= firstVisibleRow && idx <= lastVisibleRow} + {#if customColumnRenderer} + +
+ toggleSelectRow(row)} + onEdit={e => editRow(e, row)} + {allowSelectRows} + {allowEditRows} /> +
+ + {/if} + {#each fields as field} + +
+ +
+ + {/each} {/if} - {#each fields as field} - -
- -
- - {/each} - {/if} - - {/each} + + {/each} + {:else} +
+ + + +
No rows found.
+
+ {/if} @@ -322,6 +335,25 @@ text-overflow: ellipsis; } + .placeholder { + padding: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: var( + --spectrum-table-cell-text-color, + var(--spectrum-alias-text-color) + ); + } + .placeholder div { + margin-top: 10px; + font-size: var( + --spectrum-table-cell-text-size, + var(--spectrum-alias-font-size-default) + ); + } + tbody { z-index: 1; }