Add inline button for creating columns

packages/frontend-core/src/components/grid/layout/HeaderRow.svelte

@@ -2,8 +2,17 @@
   import { getContext } from "svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
+  import { Icon } from "@budibase/bbui"
 
-  const { renderedColumns } = getContext("grid")
+  const { renderedColumns, dispatch, scroll, hiddenColumnsWidth, width } =
+    getContext("grid")
+
+  $: columnsWidth = $renderedColumns.reduce(
+    (total, col) => (total += col.width),
+    0
+  )
+  $: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
+  $: left = Math.min($width - 40, end)
 </script>
 
 <div class="header">
@@ -14,6 +23,13 @@
       {/each}
     </div>
   </GridScrollWrapper>
+  <div
+    class="add"
+    style="left:{left}px"
+    on:click={() => dispatch("add-column")}
+  >
+    <Icon name="Add" />
+  </div>
 </div>
 
 <style>
@@ -27,4 +43,19 @@
   .row {
     display: flex;
   }
+  .add {
+    height: var(--default-row-height);
+    display: grid;
+    place-items: center;
+    width: 40px;
+    position: absolute;
+    top: 0;
+    border-left: var(--cell-border);
+    border-right: var(--cell-border);
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .add:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
 </style>

packages/frontend-core/src/components/grid/stores/viewport.js

@@ -45,11 +45,16 @@ export const deriveStores = context => {
   )
 
   // Derive visible columns
+  const scrollLeftRounded = derived(scrollLeft, $scrollLeft => {
+    const interval = 50
+    return Math.round($scrollLeft / interval) * interval
+  })
   const renderedColumns = derived(
-    [visibleColumns, scrollLeft, width],
+    [visibleColumns, scrollLeftRounded, width],
-    ([$visibleColumns, $scrollLeft, $width]) => {
+    ([$visibleColumns, $scrollLeft, $width], set) => {
       if (!$visibleColumns.length) {
-        return []
+        set([])
+        return
       }
       let startColIdx = 0
       let rightEdge = $visibleColumns[0].width
@@ -69,16 +74,14 @@ export const deriveStores = context => {
         leftEdge += $visibleColumns[endColIdx].width
         endColIdx++
       }
-      const nextRenderedColumns = $visibleColumns.slice(startColIdx, endColIdx)
+      const next = $visibleColumns.slice(startColIdx, endColIdx)
 
-      // Cautiously shrink the number of rendered columns.
+      // Only update if the column selection is actually different
-      // This is to avoid rapidly shrinking and growing the visible column count
+      const current = get(renderedColumns)
-      // which results in remounting cells
+      const currentKey = current.map(col => col.width).join("-")
-      const currentCount = get(renderedColumns).length
+      const nextKey = next.map(col => col.width).join("-")
-      if (currentCount === nextRenderedColumns.length + 1) {
+      if (currentKey !== nextKey) {
-        return $visibleColumns.slice(startColIdx, endColIdx + 1)
+        set(next)
-      } else {
-        return nextRenderedColumns
       }
     },
     []