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,12 +74,11 @@
   }
 </script>
 
-<div use:styleable={$component.styles}>
-  <div
+<div
   lang="en"
   dir="ltr"
   class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}
-    style={`height: ${rowCount * 55}px;`}>
+  use:styleable={styles}>
   <table class="spectrum-Table">
     <thead class="spectrum-Table-head">
       <tr>
@@ -104,7 +116,6 @@
       {/each}
     </tbody>
   </table>
-  </div>
 </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);