Add setting for table row count and improve height calculation

packages/standard-components/manifest.json

@@ -1533,6 +1533,12 @@
         "key": "showAutoColumns",
         "defaultValue": false
       },
+      {
+        "type": "number",
+        "label": "Row Count",
+        "key": "rowCount",
+        "defaultValue": 8
+      },
       {
         "type": "select",
         "label": "Theme",

packages/standard-components/src/table/Table.svelte

@@ -8,7 +8,7 @@
   export let dataProvider
   export let columns
   export let showAutoColumns
-  export let rowCount = 8
+  export let rowCount
 
   const component = getContext("component")
   const { styleable } = getContext("sdk")
@@ -16,12 +16,26 @@
   let sortColumn
   let sortOrder
 
+  $: styles = makeStyles($component.styles, rowCount)
   $: rows = dataProvider?.rows ?? []
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: loaded = dataProvider?.loaded ?? false
   $: schema = dataProvider?.schema ?? {}
   $: fields = getFields(schema, columns, showAutoColumns)
 
+  const makeStyles = (styles, rowCount) => {
+    if (!rowCount) {
+      return styles
+    }
+    return {
+      ...styles,
+      normal: {
+        ...styles.normal,
+        height: `${37 + rowCount * 56}px`,
+      },
+    }
+  }
+
   const sortRows = (rows, sortColumn, sortOrder) => {
     if (!sortColumn || !sortOrder) {
       return rows
@@ -52,7 +66,6 @@
     }
     let columns = []
     Object.entries(schema).forEach(([field, fieldSchema]) => {
-      console.log(fieldSchema)
       if (showAutoColumns || !fieldSchema?.autocolumn) {
         columns.push(field)
       }
@@ -61,50 +74,48 @@
   }
 </script>
 
-<div use:styleable={$component.styles}>
-  <div
-    lang="en"
-    dir="ltr"
-    class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}
-    style={`height: ${rowCount * 55}px;`}>
-    <table class="spectrum-Table">
-      <thead class="spectrum-Table-head">
-        <tr>
+<div
+  lang="en"
+  dir="ltr"
+  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}
+  use:styleable={styles}>
+  <table class="spectrum-Table">
+    <thead class="spectrum-Table-head">
+      <tr>
+        {#each fields as field}
+          <th
+            class="spectrum-Table-headCell is-sortable"
+            class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
+            class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
+            on:click={() => sortBy(field)}>
+            <div class="spectrum-Table-headCell-content">
+              {schema[field]?.name}
+              <svg
+                class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                class:visible={sortColumn === field}
+                focusable="false"
+                aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Arrow100" />
+              </svg>
+            </div>
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody class="spectrum-Table-body">
+      {#each sortedRows as row}
+        <tr class="spectrum-Table-row">
           {#each fields as field}
-            <th
-              class="spectrum-Table-headCell is-sortable"
-              class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
-              class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
-              on:click={() => sortBy(field)}>
-              <div class="spectrum-Table-headCell-content">
-                {schema[field]?.name}
-                <svg
-                  class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                  class:visible={sortColumn === field}
-                  focusable="false"
-                  aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Arrow100" />
-                </svg>
+            <td class="spectrum-Table-cell" tabindex="0">
+              <div class="spectrum-Table-cell-content">
+                <CellRenderer schema={schema[field]} value={row[field]} />
               </div>
-            </th>
+            </td>
           {/each}
         </tr>
-      </thead>
-      <tbody class="spectrum-Table-body">
-        {#each sortedRows as row}
-          <tr class="spectrum-Table-row">
-            {#each fields as field}
-              <td class="spectrum-Table-cell" tabindex="0">
-                <div class="spectrum-Table-cell-content">
-                  <CellRenderer schema={schema[field]} value={row[field]} />
-                </div>
-              </td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </div>
+      {/each}
+    </tbody>
+  </table>
 </div>
 
 <style>
@@ -119,6 +130,8 @@
     z-index: 1;
   }
   th {
+    vertical-align: bottom;
+    height: 36px;
     position: sticky;
     top: 0;
     background-color: var(--spectrum-global-color-gray-100);