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}
+
+ {/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;
}