Add column width button

packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte

@@ -0,0 +1,89 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover } from "@budibase/bbui"
+  import { DefaultColumnWidth, MinColumnWidth } from "../lib/constants"
+
+  const { stickyColumn, columns } = getContext("grid")
+  const smallSize = MinColumnWidth
+  const mediumSize = DefaultColumnWidth
+  const largeSize = DefaultColumnWidth * 1.5
+
+  let open = false
+  let anchor
+
+  $: allSmall = $columns.every(col => col.width === smallSize)
+  $: allMedium = $columns.every(col => col.width === mediumSize)
+  $: allLarge = $columns.every(col => col.width === largeSize)
+  $: custom = !allSmall && !allMedium && !allLarge
+  $: sizeOptions = [
+    {
+      label: "Small",
+      size: smallSize,
+      selected: allSmall,
+    },
+    {
+      label: "Medium",
+      size: mediumSize,
+      selected: allMedium,
+    },
+    {
+      label: "Large",
+      size: largeSize,
+      selected: allLarge,
+    },
+  ]
+
+  const changeColumnWidth = async width => {
+    columns.update(state => {
+      state.forEach(column => {
+        column.width = width
+      })
+      return state
+    })
+    if ($stickyColumn) {
+      stickyColumn.update(state => ({
+        ...state,
+        width,
+      }))
+    }
+    await columns.actions.saveChanges()
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="ViewColumn"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open}
+  >
+    Column width
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    {#each sizeOptions as option}
+      <ActionButton
+        quiet
+        on:click={() => changeColumnWidth(option.size)}
+        selected={option.selected}
+      >
+        {option.label}
+      </ActionButton>
+    {/each}
+    {#if custom}
+      <ActionButton selected={custom} quiet>Custom</ActionButton>
+    {/if}
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+</style>

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

@@ -22,6 +22,7 @@
   import HideColumnsButton from "../controls/HideColumnsButton.svelte"
   import AddRowButton from "../controls/AddRowButton.svelte"
   import RowHeightButton from "../controls/RowHeightButton.svelte"
+  import ColumnWidthButton from "../controls/ColumnWidthButton.svelte"
   import NewRowTop from "./NewRowTop.svelte"
   import {
     MaxCellRenderHeight,
@@ -29,7 +30,6 @@
     GutterWidth,
     DefaultRowHeight,
   } from "../lib/constants"
-  import NewRowBottom from "./NewRowBottom.svelte"
 
   export let API = null
   export let tableId = null
@@ -112,6 +112,7 @@
       <AddRowButton />
       <AddColumnButton />
       <slot name="controls" />
+      <ColumnWidthButton />
       <RowHeightButton />
       <HideColumnsButton />
       <SortButton />

packages/frontend-core/src/components/grid/lib/events.js

@@ -21,10 +21,7 @@ export const createEventManagers = () => {
 
     // Return unsubscribe function
     return () => {
-      console.log("unsub", event)
-      console.log(subscribers[event].length)
       subscribers[event] = subscribers[event].filter(cb => cb !== callback)
-      console.log(subscribers[event].length)
     }
   }