@budibase/bbui 1.0.76-alpha.5 → 1.0.78

package/src/Table/Table.svelte

@@ -3,8 +3,8 @@
   import "@spectrum-css/table/dist/index-vars.css"
   import CellRenderer from "./CellRenderer.svelte"
   import SelectEditRenderer from "./SelectEditRenderer.svelte"
-  import { cloneDeep, deepGet } from "../helpers"
-  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
+  import { cloneDeep } from "lodash"
+  import { deepGet } from "../helpers"
 
   /**
    * The expected schema is our normal couch schemas for our tables.
@@ -15,11 +15,6 @@
    * sortable: Set to false to disable sorting data by a certain column
    * editable: Set to false to disable editing a certain column if the
    *  allowEditColumns prop is true
-   * width: the width of the column
-   * align: the alignment of the column
-   * template: a HBS or JS binding to use as the value
-   * background: the background color
-   * color: the text color
    */
   export let data = []
   export let schema = {}
@@ -34,14 +29,13 @@
   export let editColumnTitle = "Edit"
   export let customRenderers = []
   export let disableSorting = false
-  export let autoSortColumns = true
-  export let compact = false
 
   const dispatch = createEventDispatcher()
 
   // Config
+  const rowHeight = 55
   const headerHeight = 36
-  $: rowHeight = compact ? 46 : 55
+  const rowPreload = 5
 
   // Sorting state
   let sortColumn
@@ -52,20 +46,32 @@
   let loaded = false
   $: schema = fixSchema(schema)
   $: if (!loading) loaded = true
-  $: fields = getFields(schema, showAutoColumns, autoSortColumns)
-  $: rows = fields?.length ? data || [] : []
-  $: visibleRowCount = getVisibleRowCount(
-    loaded,
-    height,
-    rows.length,
-    rowCount,
-    rowHeight
-  )
-  $: contentStyle = getContentStyle(visibleRowCount, rowCount, rowHeight)
+  $: rows = data ?? []
+  $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
+  $: contentStyle = getContentStyle(visibleRowCount, rowCount)
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
-  $: gridStyle = getGridStyle(fields, schema, showEditColumn)
+  $: fields = getFields(schema, showAutoColumns)
   $: showEditColumn = allowEditRows || allowSelectRows
-  $: cellStyles = computeCellStyles(schema)
+
+  // Scrolling state
+  let timeout
+  let nextScrollTop = 0
+  let scrollTop = 0
+  $: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
+  $: lastVisibleRow = calculateLastVisibleRow(
+    firstVisibleRow,
+    visibleRowCount,
+    rows.length
+  )
+
+  // Reset state when data changes
+  $: rows.length, reset()
+  const reset = () => {
+    nextScrollTop = 0
+    scrollTop = 0
+    clearTimeout(timeout)
+    timeout = null
+  }
 
   const fixSchema = schema => {
     let fixedSchema = {}
@@ -85,7 +91,7 @@
     return fixedSchema
   }
 
-  const getVisibleRowCount = (loaded, height, allRows, rowCount, rowHeight) => {
+  const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
     if (!loaded) {
       return rowCount || 0
     }
@@ -95,28 +101,11 @@
     return Math.min(allRows, Math.ceil(height / rowHeight))
   }
 
-  const getContentStyle = (visibleRows, rowCount, rowHeight) => {
+  const getContentStyle = (visibleRows, rowCount) => {
     if (!rowCount || !visibleRows) {
       return ""
     }
-    return `height: ${headerHeight + visibleRows * rowHeight}px;`
-  }
-
-  const getGridStyle = (fields, schema, showEditColumn) => {
-    let style = "grid-template-columns:"
-    if (showEditColumn) {
-      style += " auto"
-    }
-    fields?.forEach(field => {
-      const fieldSchema = schema[field]
-      if (fieldSchema.width) {
-        style += ` ${fieldSchema.width}`
-      } else {
-        style += " minmax(auto, 1fr)"
-      }
-    })
-    style += ";"
-    return style
+    return `height: ${headerHeight + visibleRows * (rowHeight + 1)}px;`
   }
 
   const sortRows = (rows, sortColumn, sortOrder) => {
@@ -155,14 +144,14 @@
     return name || ""
   }
 
-  const getFields = (schema, showAutoColumns, autoSortColumns) => {
+  const getFields = (schema, showAutoColumns) => {
     let columns = []
     let autoColumns = []
     Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
       if (!field || !fieldSchema) {
         return
       }
-      if (!autoSortColumns || !fieldSchema?.autocolumn) {
+      if (!fieldSchema?.autocolumn) {
         columns.push(fieldSchema)
       } else if (showAutoColumns) {
         autoColumns.push(fieldSchema)
@@ -183,6 +172,28 @@
       .map(column => column.name)
   }
 
+  const onScroll = event => {
+    nextScrollTop = event.target.scrollTop
+    if (timeout) {
+      return
+    }
+    timeout = setTimeout(() => {
+      scrollTop = nextScrollTop
+      timeout = null
+    }, 50)
+  }
+
+  const calculateFirstVisibleRow = scrollTop => {
+    return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
+  }
+
+  const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
+    if (visibleRowCount === 0) {
+      return -1
+    }
+    return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
+  }
+
   const editColumn = (e, field) => {
     e.stopPropagation()
     dispatch("editcolumn", field)
@@ -203,233 +214,170 @@
       selectedRows = [...selectedRows, row]
     }
   }
-
-  const computeCellStyles = schema => {
-    let styles = {}
-    Object.keys(schema || {}).forEach(field => {
-      styles[field] = ""
-      if (schema[field].color) {
-        styles[field] += `color: ${schema[field].color};`
-      }
-      if (schema[field].background) {
-        styles[field] += `background-color: ${schema[field].background};`
-      }
-      if (schema[field].align === "Center") {
-        styles[field] += "justify-content: center; text-align: center;"
-      }
-      if (schema[field].align === "Right") {
-        styles[field] += "justify-content: flex-end; text-align: right;"
-      }
-    })
-    return styles
-  }
 </script>
 
-<div
-  class="wrapper"
-  class:wrapper--quiet={quiet}
-  class:wrapper--compact={compact}
-  bind:offsetHeight={height}
-  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
->
+<div class="wrapper" bind:offsetHeight={height}>
   {#if !loaded}
-    <div class="loading" style={contentStyle}>
-      <ProgressCircle />
-    </div>
+    <div class="loading" style={contentStyle} />
   {:else}
-    <div class="spectrum-Table" style={`${contentStyle}${gridStyle}`}>
-      {#if fields.length}
-        <div class="spectrum-Table-head">
-          {#if showEditColumn}
-            <div
-              class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
-            >
-              {editColumnTitle || ""}
-            </div>
+    <div
+      on:scroll={onScroll}
+      class:quiet
+      style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+      class="container"
+    >
+      <div style={contentStyle}>
+        <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
+          {#if fields.length}
+            <thead class="spectrum-Table-head">
+              <tr>
+                {#if showEditColumn}
+                  <th class="spectrum-Table-headCell">
+                    <div class="spectrum-Table-headCell-content">
+                      {editColumnTitle || ""}
+                    </div>
+                  </th>
+                {/if}
+                {#each fields as field}
+                  <th
+                    class="spectrum-Table-headCell"
+                    class:is-sortable={schema[field].sortable !== false}
+                    class:is-sorted-desc={sortColumn === field &&
+                      sortOrder === "Descending"}
+                    class:is-sorted-asc={sortColumn === field &&
+                      sortOrder === "Ascending"}
+                    on:click={() => sortBy(schema[field])}
+                  >
+                    <div class="spectrum-Table-headCell-content">
+                      <div class="title">{getDisplayName(schema[field])}</div>
+                      {#if schema[field]?.autocolumn}
+                        <svg
+                          class="spectrum-Icon spectrum-Table-autoIcon"
+                          focusable="false"
+                        >
+                          <use xlink:href="#spectrum-icon-18-MagicWand" />
+                        </svg>
+                      {/if}
+                      {#if sortColumn === field}
+                        <svg
+                          class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                          focusable="false"
+                          aria-hidden="true"
+                        >
+                          <use xlink:href="#spectrum-css-icon-Arrow100" />
+                        </svg>
+                      {/if}
+                      {#if allowEditColumns && schema[field]?.editable !== false}
+                        <svg
+                          class="spectrum-Icon spectrum-Table-editIcon"
+                          focusable="false"
+                          on:click={e => editColumn(e, field)}
+                        >
+                          <use xlink:href="#spectrum-icon-18-Edit" />
+                        </svg>
+                      {/if}
+                    </div>
+                  </th>
+                {/each}
+              </tr>
+            </thead>
           {/if}
-          {#each fields as field}
-            <div
-              class="spectrum-Table-headCell"
-              class:spectrum-Table-headCell--alignCenter={schema[field]
-                .align === "Center"}
-              class:spectrum-Table-headCell--alignRight={schema[field].align ===
-                "Right"}
-              class:is-sortable={schema[field].sortable !== false}
-              class:is-sorted-desc={sortColumn === field &&
-                sortOrder === "Descending"}
-              class:is-sorted-asc={sortColumn === field &&
-                sortOrder === "Ascending"}
-              on:click={() => sortBy(schema[field])}
-            >
-              <div class="title">{getDisplayName(schema[field])}</div>
-              {#if schema[field]?.autocolumn}
-                <svg
-                  class="spectrum-Icon spectrum-Table-autoIcon"
-                  focusable="false"
-                >
-                  <use xlink:href="#spectrum-icon-18-MagicWand" />
-                </svg>
-              {/if}
-              {#if sortColumn === field}
-                <svg
-                  class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                  focusable="false"
-                  aria-hidden="true"
+          <tbody class="spectrum-Table-body">
+            {#if sortedRows?.length && fields.length}
+              {#each sortedRows as row, idx}
+                <tr
+                  on:click={() => dispatch("click", row)}
+                  on:click={() => toggleSelectRow(row)}
+                  class="spectrum-Table-row"
+                  class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}
                 >
-                  <use xlink:href="#spectrum-css-icon-Arrow100" />
-                </svg>
-              {/if}
-              {#if allowEditColumns && schema[field]?.editable !== false}
-                <svg
-                  class="spectrum-Icon spectrum-Table-editIcon"
-                  focusable="false"
-                  on:click={e => editColumn(e, field)}
-                >
-                  <use xlink:href="#spectrum-icon-18-Edit" />
-                </svg>
-              {/if}
-            </div>
-          {/each}
-        </div>
-      {/if}
-      {#if sortedRows?.length}
-        {#each sortedRows as row, idx}
-          <div
-            class="spectrum-Table-row"
-            on:click={() => dispatch("click", row)}
-            on:click={() => toggleSelectRow(row)}
-          >
-            {#if showEditColumn}
-              <div
-                class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
-              >
-                <SelectEditRenderer
-                  data={row}
-                  selected={selectedRows.includes(row)}
-                  onToggleSelection={() => toggleSelectRow(row)}
-                  onEdit={e => editRow(e, row)}
-                  {allowSelectRows}
-                  {allowEditRows}
-                />
-              </div>
+                  {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
+                    {#if showEditColumn}
+                      <td
+                        class="spectrum-Table-cell spectrum-Table-cell--divider"
+                      >
+                        <div class="spectrum-Table-cell-content">
+                          <SelectEditRenderer
+                            data={row}
+                            selected={selectedRows.includes(row)}
+                            onToggleSelection={() => toggleSelectRow(row)}
+                            onEdit={e => editRow(e, row)}
+                            {allowSelectRows}
+                            {allowEditRows}
+                          />
+                        </div>
+                      </td>
+                    {/if}
+                    {#each fields as field}
+                      <td
+                        class="spectrum-Table-cell"
+                        class:spectrum-Table-cell--divider={!!schema[field]
+                          .divider}
+                      >
+                        <div class="spectrum-Table-cell-content">
+                          <CellRenderer
+                            {customRenderers}
+                            {row}
+                            schema={schema[field]}
+                            value={deepGet(row, field)}
+                            on:clickrelationship
+                          >
+                            <slot />
+                          </CellRenderer>
+                        </div>
+                      </td>
+                    {/each}
+                  {/if}
+                </tr>
+              {/each}
+            {:else}
+              <tr class="placeholder-row">
+                {#if showEditColumn}
+                  <td class="placeholder-offset" />
+                {/if}
+                {#each fields as field}
+                  <td />
+                {/each}
+                <div class="placeholder" class:has-fields={fields.length > 0}>
+                  <div class="placeholder-content">
+                    <svg
+                      class="spectrum-Icon spectrum-Icon--sizeXXL"
+                      focusable="false"
+                    >
+                      <use xlink:href="#spectrum-icon-18-Table" />
+                    </svg>
+                    <div>No rows found</div>
+                  </div>
+                </div>
+              </tr>
             {/if}
-            {#each fields as field}
-              <div
-                class="spectrum-Table-cell"
-                class:spectrum-Table-cell--divider={!!schema[field].divider}
-                style={cellStyles[field]}
-              >
-                <CellRenderer
-                  {customRenderers}
-                  {row}
-                  schema={schema[field]}
-                  value={deepGet(row, field)}
-                  on:clickrelationship
-                >
-                  <slot />
-                </CellRenderer>
-              </div>
-            {/each}
-          </div>
-        {/each}
-      {:else}
-        <div class="placeholder" class:placeholder--no-fields={!fields?.length}>
-          <div class="placeholder-content">
-            <svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false">
-              <use xlink:href="#spectrum-icon-18-Table" />
-            </svg>
-            <div>No rows found</div>
-          </div>
-        </div>
-      {/if}
+          </tbody>
+        </table>
+      </div>
     </div>
   {/if}
 </div>
 
 <style>
-  /* Wrapper */
   .wrapper {
+    background-color: var(--spectrum-alias-background-color-secondary);
+    overflow: hidden;
     position: relative;
     z-index: 0;
-    --table-bg: var(--spectrum-global-color-gray-50);
-    --table-border: 1px solid var(--spectrum-alias-border-color-mid);
-    --cell-padding: var(--spectrum-global-dimension-size-250);
-  }
-  .wrapper--quiet {
-    --table-bg: var(--spectrum-alias-background-color-transparent);
-  }
-  .wrapper--compact {
-    --cell-padding: var(--spectrum-global-dimension-size-150);
   }
 
-  /* Loading */
-  .loading {
-    display: grid;
-    place-items: center;
-    min-height: 100px;
-  }
-
-  /* Table */
-  .spectrum-Table {
-    width: 100%;
-    border-radius: 0;
-    display: grid;
+  .container {
+    height: 100%;
+    position: relative;
     overflow: auto;
   }
-
-  /* Header */
-  .spectrum-Table-head {
-    display: contents;
-  }
-  .spectrum-Table-head > :first-child {
-    border-left: 1px solid transparent;
-    padding-left: var(--cell-padding);
-  }
-  .spectrum-Table-head > :last-child {
-    border-right: 1px solid transparent;
-    padding-right: var(--cell-padding);
-  }
-  .spectrum-Table-headCell {
-    height: var(--header-height);
-    position: sticky;
-    top: 0;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background-color: var(--spectrum-alias-background-color-secondary);
-    z-index: 2;
-    border-bottom: var(--table-border);
-    padding: 0 calc(var(--cell-padding) / 1.33);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    user-select: none;
-  }
-  .spectrum-Table-headCell--alignCenter {
-    justify-content: center;
-  }
-  .spectrum-Table-headCell--alignRight {
-    justify-content: flex-end;
-  }
-  .spectrum-Table-headCell--divider {
-    padding-right: var(--cell-padding);
+  .container.quiet {
+    border: none;
   }
-  .spectrum-Table-headCell--divider + .spectrum-Table-headCell {
-    padding-left: var(--cell-padding);
-  }
-  .spectrum-Table-headCell--edit {
-    position: sticky;
-    left: 0;
-    z-index: 3;
-  }
-  .spectrum-Table-headCell .title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
-    opacity: 1;
-    transition: opacity 0.2s ease;
+  table {
+    width: 100%;
   }
+
   .spectrum-Table-headCell .spectrum-Icon {
     pointer-events: all;
     margin-left: var(
@@ -445,93 +393,63 @@
   .spectrum-Table-editIcon {
     opacity: 0;
   }
-
-  /* Table rows */
-  .spectrum-Table-row {
-    display: contents;
-  }
-  .spectrum-Table-row:hover .spectrum-Table-cell {
-    /*background-color: var(--hover-bg) !important;*/
-  }
-  .spectrum-Table-row:hover .spectrum-Table-cell:after {
-    background-color: var(--spectrum-alias-highlight-hover);
-  }
-  .wrapper--quiet .spectrum-Table-row {
-    border-left: none;
-    border-right: none;
-  }
-  .spectrum-Table-row > :first-child {
-    border-left: var(--table-border);
-    padding-left: var(--cell-padding);
-  }
-  .spectrum-Table-row > :last-child {
-    border-right: var(--table-border);
-    padding-right: var(--cell-padding);
+  .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
+    opacity: 1;
+    transition: opacity 0.2s ease;
   }
 
-  /* Table cells */
-  .spectrum-Table-cell {
-    flex: 1 1 auto;
-    padding: 0 calc(var(--cell-padding) / 1.33);
-    border-top: none;
-    border-bottom: none;
-    border-radius: 0;
-    text-overflow: ellipsis;
+  th {
+    vertical-align: middle;
+    height: var(--header-height);
+    position: sticky;
+    top: 0;
+    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));
+  }
+  .spectrum-Table-headCell-content {
     white-space: nowrap;
-    height: var(--row-height);
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: 4px;
-    border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
-    background-color: var(--table-bg);
-    z-index: 1;
+    user-select: none;
   }
-  .spectrum-Table-cell--divider {
-    padding-right: var(--cell-padding);
+  .spectrum-Table-headCell-content .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  .spectrum-Table-cell--divider + .spectrum-Table-cell {
-    padding-left: var(--cell-padding);
+
+  .placeholder-row {
+    position: relative;
+    height: 150px;
   }
-  .spectrum-Table-cell--edit {
-    position: sticky;
-    left: 0;
-    z-index: 2;
+  .placeholder-row td {
+    border-top: none !important;
+    border-bottom: none !important;
   }
-  .spectrum-Table-cell:after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    transition: background-color
-      var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
+  .placeholder-offset {
+    width: 1px;
   }
-
-  /* Placeholder  */
   .placeholder {
+    top: 0;
+    height: 100%;
+    left: 0;
+    width: 100%;
+    position: absolute;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    border: var(--table-border);
-    border-top: none;
-    grid-column: 1 / -1;
-    background-color: var(--table-bg);
   }
-  .placeholder--no-fields {
-    border-top: var(--table-border);
-  }
-  .wrapper--quiet .placeholder {
-    border-left: none;
-    border-right: none;
+  .placeholder.has-fields {
+    top: var(--header-height);
+    height: calc(100% - var(--header-height));
   }
+
   .placeholder-content {
-    padding: 40px;
+    padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -549,4 +467,41 @@
     );
     text-align: center;
   }
+
+  tbody {
+    z-index: 1;
+  }
+  tbody tr {
+    height: var(--row-height);
+  }
+  tbody tr.hidden {
+    height: calc(var(--row-height) + 1px);
+  }
+  td {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+    border-top: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+    border-radius: 0;
+  }
+  tr:first-child td {
+    border-top: none;
+  }
+  tr:last-child td {
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+  }
+  td.spectrum-Table-cell--divider {
+    width: 1px;
+  }
+  .spectrum-Table-cell-content {
+    height: var(--row-height);
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+  }
 </style>