From f4965d2fa35dc1022810a1bcef81c4dd1e4b6975 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 26 Oct 2020 17:42:00 +0000
Subject: [PATCH] restructuring, more styling updates on table, renaming

---
 packages/builder/package.json                 |   2 +-
 .../backend/DataTable/Table.old.svelte        | 233 ------------------
 .../components/backend/DataTable/Table.svelte | 114 +++++----
 .../DataTable/TableHeader/TableHeader.svelte  |  13 +-
 .../backend/DataTable/TableHeader/index.js    |  48 +---
 .../TableLoadingOverlay/LoadingOverlay.svelte |  29 +++
 .../DataTable/TableLoadingOverlay/index.js    |  17 ++
 .../backend/DataTable/TablePagination.svelte  | 136 ----------
 .../buttons/CreateColumnButton.svelte         |   4 +-
 .../DataTable/cells/RelationshipCell.svelte   |   4 +-
 .../backend/DataTable/cells/cellRenderers.js  |   4 +-
 .../CreateEditColumn.svelte}                  |   9 +-
 .../popovers/ColumnPopover.old.svelte         | 145 -----------
 .../DataTable/popovers/ColumnPopover.svelte   |   1 -
 .../DataTable/popovers/RowPopover.svelte      |   4 +-
 packages/builder/yarn.lock                    |   8 +-
 16 files changed, 141 insertions(+), 630 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DataTable/Table.old.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js
 delete mode 100644 packages/builder/src/components/backend/DataTable/TablePagination.svelte
 rename packages/builder/src/components/backend/DataTable/{popovers/CreateEditColumnPopover.svelte => modals/CreateEditColumn.svelte} (98%)
 delete mode 100644 packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.old.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 0ca766de36..f77060c1da 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -66,7 +66,7 @@
     "@budibase/bbui": "^1.44.1",
     "@budibase/client": "^0.2.6",
     "@budibase/colorpicker": "^1.0.1",
-    "@budibase/svelte-ag-grid": "^0.0.15",
+    "@budibase/svelte-ag-grid": "^0.0.16",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@sentry/browser": "5.19.1",
     "@svelteschool/svelte-forms": "^0.7.0",
diff --git a/packages/builder/src/components/backend/DataTable/Table.old.svelte b/packages/builder/src/components/backend/DataTable/Table.old.svelte
deleted file mode 100644
index 3fa42aeb7c..0000000000
--- a/packages/builder/src/components/backend/DataTable/Table.old.svelte
+++ /dev/null
@@ -1,233 +0,0 @@
-<script>
-  import { goto, params } from "@sveltech/routify"
-  import { onMount } from "svelte"
-  import { fade } from "svelte/transition"
-  import fsort from "fast-sort"
-  import getOr from "lodash/fp/getOr"
-  import { store, backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import { Button, Icon } from "@budibase/bbui"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import AttachmentList from "./AttachmentList.svelte"
-  import TablePagination from "./TablePagination.svelte"
-  import CreateEditRowModal from "./modals/CreateEditRowModal.svelte"
-  import RowPopover from "./buttons/CreateRowButton.svelte"
-  import ColumnPopover from "./buttons/CreateColumnButton.svelte"
-  import ViewPopover from "./buttons/CreateViewButton.svelte"
-  import ColumnHeaderPopover from "./popovers/ColumnPopover.svelte"
-  import EditRowPopover from "./popovers/RowPopover.svelte"
-  import CalculationPopover from "./buttons/CalculateButton.svelte"
-  import Spinner from "components/common/Spinner.svelte"
-
-  const ITEMS_PER_PAGE = 10
-
-  export let schema = []
-  export let data = []
-  export let title
-  export let allowEditing = false
-  export let loading = false
-
-  let currentPage = 0
-
-  $: columns = schema ? Object.keys(schema) : []
-  $: sort = $backendUiStore.sort
-  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
-  $: paginatedData =
-    sorted && sorted.length
-      ? sorted.slice(
-          currentPage * ITEMS_PER_PAGE,
-          currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
-        )
-      : []
-  $: tableId = data?.length ? data[0].tableId : null
-
-  function selectRelationship(row, fieldName) {
-    if (!row?.[fieldName]?.length) {
-      return
-    }
-    $goto(
-      `/${$params.application}/backend/table/${tableId}/relationship/${row._id}/${fieldName}`
-    )
-  }
-</script>
-
-<section>
-  <div class="table-controls">
-    <h2 class="title">
-      <span>{title}</span>
-      {#if loading}
-        <div transition:fade>
-          <Spinner size="10" />
-        </div>
-      {/if}
-    </h2>
-    <div class="popovers">
-      <slot />
-    </div>
-  </div>
-  <table class="bb-table">
-    <thead>
-      <tr>
-        {#if allowEditing}
-          <th class="edit-header">
-            <div>Edit</div>
-          </th>
-        {/if}
-        {#each columns as header}
-          <th>
-            {#if allowEditing}
-              <ColumnHeaderPopover field={schema[header]} />
-            {:else}
-              <div class="header">{header}</div>
-            {/if}
-          </th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#if paginatedData.length === 0}
-        {#if allowEditing}
-          <td class="no-border">No data.</td>
-        {/if}
-        {#each columns as header, idx}
-          <td class="no-border">
-            {#if idx === 0 && !allowEditing}No data.{/if}
-          </td>
-        {/each}
-      {/if}
-      {#each paginatedData as row}
-        <tr>
-          {#if allowEditing}
-            <td>
-              <EditRowPopover {row} />
-            </td>
-          {/if}
-          {#each columns as header}
-            <td>
-              {#if schema[header].type === 'link'}
-                <div
-                  class:link={row[header] && row[header].length}
-                  on:click={() => selectRelationship(row, header)}>
-                  {row[header] ? row[header].length : 0}
-                  related row(s)
-                </div>
-              {:else if schema[header].type === 'attachment'}
-                <AttachmentList files={row[header] || []} />
-              {:else}{getOr('', header, row)}{/if}
-            </td>
-          {/each}
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-  <TablePagination
-    {data}
-    bind:currentPage
-    pageItemCount={paginatedData.length}
-    {ITEMS_PER_PAGE} />
-</section>
-
-<style>
-  .title {
-    font-size: 24px;
-    font-weight: 600;
-    text-rendering: optimizeLegibility;
-    margin-top: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  .title > span {
-    margin-right: var(--spacing-xs);
-  }
-
-  table {
-    border: 1px solid var(--grey-4);
-    background: #fff;
-    border-collapse: collapse;
-    margin-top: 0;
-  }
-
-  thead {
-    background: var(--grey-3);
-    border: 1px solid var(--grey-4);
-  }
-
-  thead th {
-    color: var(--ink);
-    font-weight: 500;
-    font-size: 14px;
-    text-rendering: optimizeLegibility;
-    transition: 0.5s all;
-    vertical-align: middle;
-    height: 48px;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  thead th:hover {
-    color: var(--blue);
-    cursor: pointer;
-  }
-
-  .header {
-    text-transform: capitalize;
-  }
-
-  td {
-    max-width: 200px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    border: 1px solid var(--grey-4);
-    white-space: nowrap;
-    box-sizing: border-box;
-    padding: var(--spacing-l) var(--spacing-m);
-    font-size: var(--font-size-xs);
-  }
-
-  td.no-border {
-    border: none;
-  }
-
-  tbody tr {
-    border-bottom: 1px solid var(--grey-4);
-    transition: 0.3s background-color;
-    color: var(--ink);
-  }
-
-  tbody tr:hover {
-    background: var(--grey-1);
-  }
-
-  .table-controls {
-    width: 100%;
-  }
-
-  .popovers {
-    display: flex;
-  }
-
-  :global(.popovers > div) {
-    margin-right: var(--spacing-m);
-    margin-bottom: var(--spacing-xl);
-  }
-
-  .edit-header {
-    width: 60px;
-  }
-
-  .edit-header:hover {
-    cursor: default;
-    color: var(--ink);
-  }
-
-  .link {
-    text-decoration: underline;
-  }
-
-  .link:hover {
-    color: var(--grey-6);
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index ab405156c6..acb4c4e6c0 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -3,10 +3,15 @@
   import { goto, params } from "@sveltech/routify"
   import Spinner from "components/common/Spinner.svelte"
   import AgGrid from "@budibase/svelte-ag-grid"
-  import { getRenderer, editRowRenderer } from "./cells/cellRenderers";
+  import {
+    getRenderer,
+    editRowRenderer,
+  } from "./cells/cellRenderers"
+  import TableLoadingOverlay from "./TableLoadingOverlay"
   import TableHeader from "./TableHeader"
+  import "@budibase/svelte-ag-grid/dist/index.css"
 
-  export let schema = []
+  export let schema = {} 
   export let data = []
   export let title
   export let allowEditing = false
@@ -28,9 +33,12 @@
     pagination: true,
     enableRangeSelection: true,
     popupParent: document.body,
+    components: {
+      customLoadingOverlay: TableLoadingOverlay,
+    },
+    loadingOverlayComponent: "customLoadingOverlay",
   }
 
-  // TODO: refactor
   $: {
     let result = []
     if (allowEditing) {
@@ -43,25 +51,31 @@
         suppressMenu: true,
         minWidth: 75,
         width: 75,
-        cellRenderer: editRowRenderer
+        cellRenderer: editRowRenderer,
       })
     }
-    columnDefs = [...result, ...Object.keys(schema || {}).map(key => ({
-      headerComponent: TableHeader,
-      headerComponentParams: {
-        field: schema[key]
-      },
-      headerName: key,
-      field: key,
-      sortable: true,
-      cellRenderer: getRenderer(schema[key], true),
-      cellRendererParams: {
-        selectRelationship
-      },
-      autoHeight: true,
-      resizable: true,
-      minWidth: 200,
-    }))]
+
+    for (let key in schema) {
+      result.push({
+        headerComponent: TableHeader,
+        headerComponentParams: {
+          field: schema[key],
+          editable: allowEditing,
+        },
+        headerName: key,
+        field: key,
+        sortable: true,
+        cellRenderer: getRenderer(schema[key], true),
+        cellRendererParams: {
+          selectRelationship,
+        },
+        autoHeight: true,
+        resizable: true,
+        minWidth: 200,
+      })
+    }
+
+    columnDefs = result
   }
 
   function selectRelationship(row, fieldName) {
@@ -76,24 +90,12 @@
 
 <section>
   <div class="table-controls">
-    <h2 class="title">
-      <span>{title}</span>
-      {#if loading}
-        <div transition:fade>
-          <Spinner size="10" />
-        </div>
-      {/if}
-    </h2>
+    <h2 class="title"><span>{title}</span></h2>
     <div class="popovers">
       <slot />
     </div>
   </div>
-  <AgGrid 
-    {theme}
-    {options}
-    {data}
-    {columnDefs}
-  />
+  <AgGrid {theme} {options} {data} {columnDefs} {loading} />
 </section>
 
 <style>
@@ -125,6 +127,15 @@
     margin-bottom: var(--spacing-xl);
   }
 
+  :global(.ag-menu) {
+    border: var(--border-dark) !important;
+  }
+
+  :global(.ag-popup-child) {
+    border-radius: var(--border-radius-m) !important;
+    box-shadow: none !important;
+  }
+
   :global(.ag-header-cell-text) {
     font-family: Inter;
     font-weight: 600;
@@ -132,13 +143,13 @@
   }
 
   :global(.ag-filter) {
-    padding: var(--spacing-l);
+    padding: var(--spacing-s);
     outline: none;
     box-sizing: border-box;
     color: var(--ink);
-    border: var(--border-dark);
     border-radius: var(--border-radius-m);
     background: #fff;
+    font-family: var(--font-sans) !important;
     box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
   }
 
@@ -146,28 +157,43 @@
     border: none;
   }
 
+  :global(.ag-simple-filter-body-wrapper > *) {
+    margin-bottom: var(--spacing-m) !important;
+  }
+
+  :global(.ag-select) {
+    height: inherit !important;
+  }
+
   :global(.ag-menu input) {
     color: var(--ink) !important;
     font-size: var(--font-size-s);
-    border-radius: var(--border-radius-s);
+    border-radius: var(--border-radius-s) !important;
     border: none;
     background-color: var(--grey-2) !important;
     padding: var(--spacing-m);
     margin: 0;
     outline: none;
     font-family: var(--font-sans);
-    border: var(--border-transparent);
+    border: var(--border-transparent) !important;
+    transition: 0.2s all;
+  }
+  :global(.ag-menu input:focus) {
+    border: var(--border-blue) !important;
   }
 
   :global(.ag-picker-field-display) {
     color: var(--ink) !important;
-    font-size: var(--font-size-s);
-    border-radius: var(--border-radius-s);
-    border: none;
+    font-size: var(--font-size-s) !important;
+    border-radius: var(--border-radius-s) !important;
     background-color: var(--grey-2) !important;
-    padding: var(--spacing-m);
     font-family: var(--font-sans);
-    border: var(--border-transparent);
-    transition: all 0.2s ease-in-out;
+    border: var(--border-transparent) !important;
+  }
+
+  :global(.ag-picker-field-wrapper) {
+    background: var(--grey-2) !important;
+    border: var(--border-transparent) !important;
+    padding: var(--spacing-xs);
   }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
index 72ad6efa0a..388b081c99 100644
--- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { Modal, ModalContent } from "@budibase/bbui"
-  import CreateEditColumnPopover from "../popovers/CreateEditColumnPopover.svelte"
+  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
   const SORT_ICON_MAP = {
     asc: "ri-arrow-down-fill",
@@ -14,6 +14,7 @@
   export let enableSorting = true
   export let showColumnMenu
   export let progressSort
+  export let editable
 
   let menuButton
   let sortDirection = ""
@@ -50,13 +51,15 @@
       showCancelButton={false}
       showConfirmButton={false}
       title={`Edit Column: ${field.name}`}>
-      <CreateEditColumnPopover onClosed={modal.hide} {field} />
+      <CreateEditColumn onClosed={modal.hide} {field} />
     </ModalContent>
   </Modal>
   <div>
-    <span on:click|stopPropagation={showModal}>
-      <i class="ri-pencil-line" />
-    </span>
+    {#if editable}
+      <span on:click|stopPropagation={showModal}>
+        <i class="ri-pencil-line" />
+      </span>
+    {/if}
     <span on:click|stopPropagation={toggleMenu} bind:this={menuButton}>
       <i class="ri-filter-line" />
     </span>
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/index.js b/packages/builder/src/components/backend/DataTable/TableHeader/index.js
index 26231035d6..538681a3c1 100644
--- a/packages/builder/src/components/backend/DataTable/TableHeader/index.js
+++ b/packages/builder/src/components/backend/DataTable/TableHeader/index.js
@@ -1,46 +1,9 @@
-//  // the column the header is for
-//     column: Column;
-
-//     // the name to display for the column. if the column is using a headerValueGetter,
-//     // the displayName will take this into account.
-//     displayName: string;
-
-//     // whether sorting is enabled for the column. only put sort logic into
-//     // your header if this is true.
-//     enableSorting: boolean;
-
-//     // whether menu is enabled for the column. only display a menu button
-//     // in your header if this is true.
-//     enableMenu: boolean;
-
-//     // callback to progress the sort for this column.
-//     // the grid will decide the next sort direction eg ascending, descending or 'no sort'.
-//     // pass multiSort=true if you want to do a multi sort (eg user has shift held down when
-//     // they click)
-//     progressSort(multiSort: boolean): void;
-
-//     // callback to set the sort for this column.
-//     // pass the sort direction to use ignoring the current sort eg one of 'asc', 'desc' or null
-//     // (for no sort). pass multiSort=true if you want to do a multi sort (eg user has shift held
-//     // down when they click)
-//     setSort(sort: string, multiSort?: boolean): void;
-
-//     // callback to request the grid to show the column menu.
-//     // pass in the html element of the column menu to have the
-//     // grid position the menu over the button.
-//     showColumnMenu(menuButton: HTMLElement): void;
-
-//     // The grid API
-//     api: any;
 import TableHeader from "./TableHeader.svelte"
 
 export default class TableHeaderWrapper {
-  constructor() {
-    // foo
-  }
+  constructor() {}
 
   init(params) {
-    console.log("init", params)
     this.agParams = params
     this.container = document.createElement("div")
     this.container.style.height = "100%"
@@ -50,12 +13,12 @@ export default class TableHeaderWrapper {
       target: this.container,
       props: params,
     })
-    this.eGui = this.container
+    this.gui = this.container
   }
 
   // can get called more than once, you should return the HTML element
   getGui() {
-    return this.eGui
+    return this.gui
   }
 
   // gets called when a new Column Definition has been set for this header
@@ -65,11 +28,8 @@ export default class TableHeaderWrapper {
       target: this.container,
       props: params,
     })
-    console.log("Refreshing", params)
   }
 
   // optional method, gets called once, when component is destroyed
-  destroy() {
-    console.log("Destroy")
-  }
+  destroy() {}
 }
diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
new file mode 100644
index 0000000000..cbf4cc43ed
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/LoadingOverlay.svelte
@@ -0,0 +1,29 @@
+<script>
+  import Spinner from "components/common/Spinner.svelte"
+  import { fade } from "svelte/transition"
+</script>
+
+<div class="ag-overlay-loading-center loading-container">
+  <div transition:fade class="loading-overlay">
+    <img
+      height="30"
+      width="30"
+      src="/_builder/assets/bb-logo.svg"
+      alt="Budibase icon" />
+    <span> Loading Your Data </span>
+    <Spinner size="12" />
+  </div>
+</div>
+
+<style>
+  .loading-overlay {
+    display: flex;
+    align-items: center;
+    font-family: var(--font-sans);
+    font-weight: 500;
+  }
+
+  .loading-overlay > * {
+    margin-right: var(--spacing-m);
+  }
+</style>
diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js
new file mode 100644
index 0000000000..886391d537
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js
@@ -0,0 +1,17 @@
+import LoadingOverlay from "./LoadingOverlay.svelte"
+
+export default class LoadingOverlayWrapper {
+  init(params) {
+    this.gui = document.createElement("div")
+    new LoadingOverlay({
+      target: this.gui,
+      props: {
+        params,
+      },
+    })
+  }
+
+  getGui() {
+    return this.gui
+  }
+}
diff --git a/packages/builder/src/components/backend/DataTable/TablePagination.svelte b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
deleted file mode 100644
index ca5a58700d..0000000000
--- a/packages/builder/src/components/backend/DataTable/TablePagination.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script>
-  export let data
-  export let currentPage = 0
-  export let pageItemCount
-  export let ITEMS_PER_PAGE
-
-  let numPages = 0
-  $: numPages = Math.ceil((data?.length ?? 0) / ITEMS_PER_PAGE)
-  $: displayAllPages = numPages <= 10
-  $: pagesAroundCurrent = getPagesAroundCurrent(currentPage, numPages)
-
-  const next = () => {
-    if (currentPage + 1 === numPages) return
-    currentPage = currentPage + 1
-  }
-
-  const previous = () => {
-    if (currentPage == 0) return
-    currentPage = currentPage - 1
-  }
-
-  const selectPage = page => {
-    currentPage = page
-  }
-
-  function getPagesAroundCurrent(current, max) {
-    const start = Math.max(current - 2, 1)
-    const end = Math.min(current + 2, max - 2)
-    let pages = []
-    for (let i = start; i <= end; i++) {
-      pages.push(i)
-    }
-    return pages
-  }
-</script>
-
-<div class="pagination">
-  <div class="pagination__buttons">
-    <button on:click={previous} disabled={currentPage === 0}>&lt;</button>
-    {#if displayAllPages}
-      {#each Array(numPages) as _, idx}
-        <button
-          class:selected={idx === currentPage}
-          on:click={() => selectPage(idx)}>
-          {idx + 1}
-        </button>
-      {/each}
-    {:else}
-      <button class:selected={currentPage === 0} on:click={() => selectPage(0)}>
-        1
-      </button>
-      {#if currentPage > 3}<button disabled>...</button>{/if}
-      {#each pagesAroundCurrent as idx}
-        <button
-          class:selected={idx === currentPage}
-          on:click={() => selectPage(idx)}>
-          {idx + 1}
-        </button>
-      {/each}
-      {#if currentPage < numPages - 4}<button disabled>...</button>{/if}
-      <button
-        class:selected={currentPage === numPages - 1}
-        on:click={() => selectPage(numPages - 1)}>
-        {numPages}
-      </button>
-    {/if}
-    <button
-      on:click={next}
-      disabled={currentPage === numPages - 1 || numPages === 0}>
-      &gt;
-    </button>
-  </div>
-
-  <p>
-    {#if numPages > 1}
-      Showing
-      {ITEMS_PER_PAGE * currentPage + 1}
-      -
-      {ITEMS_PER_PAGE * currentPage + pageItemCount}
-      of
-      {data.length}
-      rows
-    {:else if numPages === 1}Showing all {data.length} row(s){/if}
-  </p>
-</div>
-
-<style>
-  .pagination {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .pagination__buttons {
-    display: flex;
-    border: 1px solid var(--grey-4);
-    border-radius: var(--border-radius-s);
-    overflow: hidden;
-  }
-
-  .pagination__buttons button {
-    display: inline-block;
-    padding: var(--spacing-s) 0;
-    text-align: center;
-    margin: 0;
-    background: #fff;
-    border: none;
-    outline: none;
-    border-right: 1px solid var(--grey-4);
-    text-transform: capitalize;
-    min-width: 20px;
-    transition: 0.3s background-color;
-    font-family: var(--font-sans);
-    color: var(--grey-6);
-    width: 40px;
-  }
-  .pagination__buttons button:last-child {
-    border-right: none;
-  }
-  .pagination__buttons button:hover {
-    cursor: pointer;
-    background-color: var(--grey-1);
-  }
-  .pagination__buttons button.selected {
-    background: var(--blue);
-    color: white;
-  }
-
-  p {
-    font-size: var(--font-size-s);
-    margin: var(--spacing-xl) 0;
-    color: var(--grey-6);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 7694a39951..7677451a44 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -6,7 +6,7 @@
     Modal,
     ModalContent,
   } from "@budibase/bbui"
-  import CreateEditColumnPopover from "../popovers/CreateEditColumnPopover.svelte"
+  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
   let modal
   let fieldName
@@ -23,6 +23,6 @@
     showCancelButton={false}
     showConfirmButton={false}
     title={'Create Column'}>
-    <CreateEditColumnPopover onClosed={modal.hide} />
+    <CreateEditColumn onClosed={modal.hide} />
   </ModalContent>
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
index f5d0baa87f..290ff0cf28 100644
--- a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
+++ b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
@@ -9,9 +9,7 @@
       : 0
 </script>
 
-<div
-  class:link={count}
-  on:click={() => selectRelationship(row, columnName)}>
+<div class:link={count} on:click={() => selectRelationship(row, columnName)}>
   {count}
   related row(s)
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
index e0a450b370..28a49f3aaf 100644
--- a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
+++ b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
@@ -1,6 +1,7 @@
 import AttachmentList from "./AttachmentCell.svelte"
 import EditRowPopover from "../popovers/RowPopover.svelte"
 import RelationshipDisplay from "./RelationshipCell.svelte"
+import LoadingOverlay from "./LoadingOverlay.svelte"
 
 const renderers = {
   attachment: attachmentRenderer,
@@ -28,7 +29,6 @@ export function editRowRenderer(params) {
   return container
 }
 
-
 /* eslint-disable no-unused-vars */
 function attachmentRenderer(options, constraints, editable) {
   return params => {
@@ -57,7 +57,7 @@ function linkedRowRenderer() {
       props: {
         row: params.data,
         columnName: params.column.colId,
-        selectRelationship: params.selectRelationship
+        selectRelationship: params.selectRelationship,
       },
     })
 
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
similarity index 98%
rename from packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
rename to packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index ff6fa33f9c..3682b38ce2 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -1,10 +1,5 @@
 <script>
-  import {
-    Input,
-    Button,
-    Select,
-    Toggle,
-  } from "@budibase/bbui"
+  import { Input, Button, Select, Toggle } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
   import { backendUiStore } from "builderStore"
   import { FIELDS } from "constants/backend"
@@ -160,10 +155,10 @@
       bind:value={field.fieldName} />
   {/if}
   <footer>
+    <Button secondary on:click={onClosed}>Cancel</Button>
     {#if originalName}
       <Button red on:click={confirmDelete}>Delete Column</Button>
     {/if}
-    <Button secondary on:click={onClosed}>Cancel</Button>
     <Button primary on:click={saveColumn}>Save Column</Button>
   </footer>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.old.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.old.svelte
deleted file mode 100644
index f844cdefae..0000000000
--- a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.old.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script>
-  import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
-  import { FIELDS } from "constants/backend"
-  import CreateEditColumnPopover from "./CreateEditColumnPopover.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { notifier } from "../../../../builderStore/store/notifications"
-
-  export let field
-
-  let anchor
-  let dropdown
-  let editing
-  let confirmDeleteDialog
-
-  $: sortColumn = $backendUiStore.sort && $backendUiStore.sort.column
-  $: sortDirection = $backendUiStore.sort && $backendUiStore.sort.direction
-  $: type = field?.type
-
-  function showEditor() {
-    editing = true
-  }
-
-  function hideEditor() {
-    dropdown.hide()
-    editing = false
-  }
-
-  function showDelete() {
-    dropdown.hide()
-    confirmDeleteDialog.show()
-  }
-
-  function deleteColumn() {
-    if (field.name === $backendUiStore.selectedTable.primaryDisplay) {
-      notifier.danger("You cannot delete the display column")
-    } else {
-      backendUiStore.actions.tables.deleteField(field)
-      notifier.success("Column deleted")
-    }
-    hideEditor()
-  }
-
-  function sort(direction, column) {
-    backendUiStore.update(state => {
-      if (direction !== "none") {
-        state.sort = { direction, column }
-      } else {
-        state.sort = undefined
-      }
-      return state
-    })
-    hideEditor()
-  }
-</script>
-
-<div class="container" bind:this={anchor} on:click={dropdown.show}>
-  <span>{field.name}</span>
-  <Icon name="arrowdown" />
-</div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
-  {#if editing}
-    <h5>Edit Column</h5>
-    <CreateEditColumnPopover onClosed={hideEditor} {field} />
-  {:else}
-    <ul>
-      {#if type !== 'link'}
-        <li data-cy="edit-column-header" on:click={showEditor}>
-          <Icon name="edit" />
-          Edit
-        </li>
-      {/if}
-      <li data-cy="delete-column-header" on:click={showDelete}>
-        <Icon name="delete" />
-        Delete
-      </li>
-      {#if sortDirection === 'desc' || sortDirection === 'asc'}
-        <li on:click={() => sort('none', field.name)}>
-          <Icon name="close" />
-          Remove sort
-        </li>
-      {/if}
-      {#if sortDirection === 'desc' || sortColumn !== field.name}
-        <li on:click={() => sort('asc', field.name)}>
-          <Icon name="sortascending" />
-          Sort A - Z
-        </li>
-      {/if}
-      {#if sortDirection === 'asc' || sortColumn !== field.name}
-        <li on:click={() => sort('desc', field.name)}>
-          <Icon name="sortdescending" />
-          Sort Z - A
-        </li>
-      {/if}
-    </ul>
-  {/if}
-</DropdownMenu>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  body={`Are you sure you wish to delete this column? Your data will be deleted and this action cannot be undone.`}
-  okText="Delete Column"
-  onOk={deleteColumn}
-  title="Confirm Delete" />
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xs);
-  }
-
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
index 883794bc76..f844cdefae 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte
@@ -1,4 +1,3 @@
-
 <script>
   import { backendUiStore } from "builderStore"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
diff --git a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
index 3ed12f03e9..55c48c9699 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte
@@ -30,9 +30,7 @@
   }
 </script>
 
-<div on:click={showModal}>
-  <i class="ri-more-line" />
-</div>
+<div on:click={showModal}><i class="ri-more-line" /></div>
 <!-- <DropdownMenu bind:this={dropdown} {anchor} align="left">
   <ul>
     <li data-cy="edit-row" on:click={showModal}>
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index e4f9e1c31f..e54caa60c0 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -731,10 +731,10 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
 
-"@budibase/svelte-ag-grid@^0.0.15":
-  version "0.0.15"
-  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-0.0.15.tgz#d115243e54b2d00624794afa07fbea4f45c2824d"
-  integrity sha512-1DYrbv07urntexv8nTHsKcgseQOaw6rVNMU0kLQXoDqHJncyyBc9bSh5qCgitAYvKtJ2GhT/Lj/v84z8Kb2fdQ==
+"@budibase/svelte-ag-grid@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-0.0.16.tgz#1b91dc1e27dad034b827dc7b258fa16d3d3bf68f"
+  integrity sha512-Yxnfe03Mo7VhuB4wJSGNoc8jaorH9lertptPt2halef9Z93kkYwdwpldnWVzQT07YdX6soPaVLhupxKrI5Hvtw==
   dependencies:
     ag-grid-community "^24.0.0"