Add table placeholder

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,6 +201,7 @@
           </tr>
         </thead>
         <tbody class="spectrum-Table-body">
+          {#if sortedRows?.length}
             {#each sortedRows as row, idx}
               <tr
                 on:click={() => toggleSelectRow(row)}
@@ -207,7 +209,8 @@
                 class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
                 {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
                   {#if customColumnRenderer}
-                  <td class="spectrum-Table-cell spectrum-Table-cell--divider">
+                    <td
+                      class="spectrum-Table-cell spectrum-Table-cell--divider">
                       <div class="spectrum-Table-cell-content">
                         <svelte:component
                           this={customColumnRenderer}
@@ -233,6 +236,16 @@
                 {/if}
               </tr>
             {/each}
+          {:else}
+            <div class="placeholder">
+              <svg
+                class="spectrum-Icon spectrum-Icon--sizeXXL"
+                focusable="false">
+                <use xlink:href="#spectrum-icon-18-Table" />
+              </svg>
+              <div>No rows found.</div>
+            </div>
+          {/if}
         </tbody>
       </table>
     </div>
@@ -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;
   }