diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index e74a3a7e7d..048ded2b5b 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -214,7 +214,7 @@
>
- {#if sortedRows?.length}
+ {#if fields.length}
{#if showEditColumn}
@@ -269,7 +269,7 @@
{/if}
- {#if sortedRows?.length}
+ {#if sortedRows?.length && fields.length}
{#each sortedRows as row, idx}
toggleSelectRow(row)}
@@ -316,15 +316,25 @@
{/each}
{:else}
-
+
+ {#if showEditColumn}
+ |
+ {/if}
+ {#each fields as field}
+ |
+ {/each}
+
+
{/if}
@@ -347,7 +357,7 @@
overflow: auto;
}
.container.quiet {
- border: none !important;
+ border: none;
}
table {
width: 100%;
@@ -381,7 +391,7 @@
z-index: 2;
background-color: var(--spectrum-alias-background-color-secondary);
border-bottom: 1px solid
- var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+ var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
}
.spectrum-Table-headCell-content {
white-space: nowrap;
@@ -396,7 +406,34 @@
text-overflow: ellipsis;
}
+ .placeholder-row {
+ position: relative;
+ height: 150px;
+ }
+ .placeholder-row td {
+ border-top: none !important;
+ border-bottom: none !important;
+ }
+ .placeholder-offset {
+ width: 1px;
+ }
.placeholder {
+ top: 0;
+ height: 100%;
+ left: 0;
+ width: 100%;
+ position: absolute;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+ .placeholder.has-fields {
+ top: var(--header-height);
+ height: calc(100% - var(--header-height));
+ }
+
+ .placeholder-content {
padding: 20px;
display: flex;
flex-direction: column;
@@ -407,12 +444,13 @@
var(--spectrum-alias-text-color)
);
}
- .placeholder div {
+ .placeholder-content div {
margin-top: 10px;
font-size: var(
--spectrum-table-cell-text-size,
var(--spectrum-alias-font-size-default)
);
+ text-align: center;
}
tbody {
@@ -431,17 +469,17 @@
td {
padding-top: 0;
padding-bottom: 0;
- border-bottom: none !important;
+ border-bottom: none;
border-top: 1px solid
- var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
- border-radius: 0 !important;
+ var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+ border-radius: 0;
}
tr:first-child td {
- border-top: none !important;
+ border-top: none;
}
tr:last-child td {
border-bottom: 1px solid
- var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+ var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
}
td.spectrum-Table-cell--divider {
width: 1px;