Add spectrum table to BBUI and update builder

packages/bbui/package.json

@@ -43,6 +43,14 @@
     "dist"
   ],
   "dependencies": {
+    "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/button": "^3.0.1",
+    "@spectrum-css/checkbox": "^3.0.1",
+    "@spectrum-css/icon": "^3.0.1",
+    "@spectrum-css/label": "^2.0.9",
+    "@spectrum-css/table": "^3.0.1",
+    "@spectrum-css/vars": "^3.0.1",
+    "dayjs": "^1.10.4",
     "markdown-it": "^12.0.4",
     "quill": "^1.3.7",
     "sirv-cli": "^0.4.6",

packages/bbui/src/Table/AttachmentRenderer.svelte

@@ -0,0 +1,39 @@
+<script>
+  export let value
+
+  const displayLimit = 5
+  $: attachments = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - attachments.length
+</script>
+
+{#each attachments as attachment}
+  {#if attachment.type.startsWith('image')}
+    <img src={attachment.url} alt={attachment.extension} />
+  {:else}
+    <div class="file">{attachment.extension}</div>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
+
+<style>
+  img {
+    height: 32px;
+    max-width: 64px;
+  }
+  .file {
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 8px;
+    color: var(--spectrum-global-color-gray-800);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: 11px;
+  }
+</style>

packages/bbui/src/Table/BooleanRenderer.svelte

@@ -0,0 +1,38 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+
+  export let value
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
+  <input
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    id="checkbox-1"
+    disabled
+    checked={!!value} />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+</label>
+
+<style>
+  .spectrum-Checkbox {
+    min-height: 0;
+  }
+  .spectrum-Checkbox-box {
+    margin: 0;
+  }
+</style>

packages/bbui/src/Table/CellRenderer.svelte

@@ -0,0 +1,27 @@
+<script>
+  import StringRenderer from "./StringRenderer.svelte"
+  import BooleanRenderer from "./BooleanRenderer.svelte"
+  import DateTimeRenderer from "./DateTimeRenderer.svelte"
+  import RelationshipRenderer from "./RelationshipRenderer.svelte"
+  import AttachmentRenderer from "./AttachmentRenderer.svelte"
+
+  export let schema
+  export let value
+
+  const plainTypes = ["string", "options", "number", "longform"]
+  $: type = schema?.type ?? "string"
+</script>
+
+{#if value != null && value !== ''}
+  {#if plainTypes.includes(type)}
+    <StringRenderer {value} />
+  {:else if type === 'boolean'}
+    <BooleanRenderer {value} />
+  {:else if type === 'datetime'}
+    <DateTimeRenderer {value} />
+  {:else if type === 'link'}
+    <RelationshipRenderer {value} />
+  {:else if type === 'attachment'}
+    <AttachmentRenderer {value} />
+  {/if}
+{/if}

packages/bbui/src/Table/DateTimeRenderer.svelte

@@ -0,0 +1,13 @@
+<script>
+  import dayjs from "dayjs"
+
+  export let value
+</script>
+
+<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
+
+<style>
+  div {
+    width: 200px;
+  }
+</style>

packages/bbui/src/Table/RelationshipRenderer.svelte

@@ -0,0 +1,20 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+
+  export let value
+
+  const displayLimit = 5
+  $: relationships = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - relationships.length
+</script>
+
+{#each relationships as relationship}
+  {#if relationship?.primaryDisplay}
+    <span class="spectrum-Label spectrum-Label--grey">
+      {relationship.primaryDisplay}
+    </span>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}

packages/bbui/src/Table/SelectEditRenderer.svelte

@@ -0,0 +1,48 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import "@spectrum-css/actionbutton/dist/index-vars.css"
+
+  export let selected
+  export let onToggleSelection
+  export let onEdit
+  export let allowSelectRows = false
+  export let allowEditRows = false
+</script>
+
+{#if allowSelectRows}
+  <label
+    class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
+    <input
+      type="checkbox"
+      class="spectrum-Checkbox-input"
+      id="checkbox-1"
+      bind:checked={selected} />
+    <span class="spectrum-Checkbox-box">
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+        focusable="false"
+        aria-hidden="true">
+        <use xlink:href="#spectrum-css-icon-Checkmark100" />
+      </svg>
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+        focusable="false"
+        aria-hidden="true">
+        <use xlink:href="#spectrum-css-icon-Dash100" />
+      </svg>
+    </span>
+  </label>
+{/if}
+{#if allowEditRows}
+  <button
+    class="spectrum-ActionButton spectrum-ActionButton--sizeS"
+    on:click={onEdit}>
+    <span class="spectrum-ActionButton-label">Edit</span>
+  </button>
+{/if}
+
+<style>
+  label {
+    margin-right: 5px;
+  }
+</style>

packages/bbui/src/Table/StringRenderer.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let value
+</script>
+
+<div>{value}</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 150px;
+  }
+</style>

packages/bbui/src/Table/Table.svelte

@@ -0,0 +1,356 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import "@spectrum-css/table/dist/index-vars.css"
+  import CellRenderer from "./CellRenderer.svelte"
+  import SelectEditRenderer from "./SelectEditRenderer.svelte"
+
+  export let data = []
+  export let schema = {}
+  export let showAutoColumns = false
+  export let rowCount = 14
+  export let quiet = true
+  export let loading = false
+  export let allowSelectRows = true
+  export let allowEditRows = true
+  export let allowEditColumns = true
+  export let selectedRows = []
+  export let customColumnRenderer = SelectEditRenderer
+  export let customColumnTitle
+
+  const dispatch = createEventDispatcher()
+
+  // Config
+  const rowHeight = 55
+  const headerHeight = 36
+  const rowPreload = 5
+  const maxRows = 100
+
+  // Sorting state
+  let sortColumn
+  let sortOrder
+
+  // Table state
+  let loaded = false
+  $: if (!loading) loaded = true
+  $: rows = data ?? []
+  $: visibleRowCount = loaded
+    ? Math.min(rows.length, rowCount || maxRows, maxRows)
+    : rowCount || 8
+  $: scroll = rows.length > visibleRowCount
+  $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
+  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
+  $: fields = getFields(schema, showAutoColumns)
+
+  // Scrolling state
+  let timeout
+  let nextScrollTop = 0
+  let scrollTop = 0
+  $: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
+  $: lastVisibleRow = calculateLastVisibleRow(
+    firstVisibleRow,
+    visibleRowCount,
+    rows.length
+  )
+
+  const getContentStyle = (visibleRows, useFixedHeight) => {
+    if (!useFixedHeight) {
+      return ""
+    }
+    return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
+  }
+
+  const sortRows = (rows, sortColumn, sortOrder) => {
+    if (!sortColumn || !sortOrder) {
+      return rows
+    }
+    return rows.slice().sort((a, b) => {
+      const colA = a[sortColumn]
+      const colB = b[sortColumn]
+      if (sortOrder === "Descending") {
+        return colA > colB ? -1 : 1
+      } else {
+        return colA > colB ? 1 : -1
+      }
+    })
+  }
+
+  const sortBy = field => {
+    if (field === sortColumn) {
+      sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
+    } else {
+      sortColumn = field
+      sortOrder = "Descending"
+    }
+  }
+
+  const getFields = (schema, showAutoColumns) => {
+    let columns = []
+    let autoColumns = []
+    Object.entries(schema).forEach(([field, fieldSchema]) => {
+      if (!fieldSchema?.autocolumn) {
+        columns.push(field)
+      } else if (showAutoColumns) {
+        autoColumns.push(field)
+      }
+    })
+    return columns.sort().concat(autoColumns)
+  }
+
+  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) => {
+    return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
+  }
+
+  const editColumn = (e, field) => {
+    e.stopPropagation()
+    dispatch("editcolumn", field)
+  }
+
+  const editRow = (e, row) => {
+    e.stopPropagation()
+    dispatch("editrow", row)
+  }
+
+  const toggleSelectRow = row => {
+    if (!allowSelectRows) {
+      return
+    }
+    if (selectedRows.includes(row)) {
+      selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
+    } else {
+      selectedRows = [...selectedRows, row]
+    }
+  }
+</script>
+
+{#if !loaded}
+  <div class="loading" style={contentStyle} />
+{:else}
+  <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}>
+        <thead class="spectrum-Table-head">
+          <tr>
+            {#if customColumnRenderer}
+              <th class="spectrum-Table-headCell">
+                <div class="spectrum-Table-headCell-content">
+                  {customColumnTitle || ''}
+                </div>
+              </th>
+            {/if}
+            {#each fields as field}
+              <th
+                class="spectrum-Table-headCell is-sortable"
+                class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
+                class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
+                on:click={() => sortBy(field)}>
+                <div class="spectrum-Table-headCell-content">
+                  <div class="title">
+                    {schema[field]?.displayName || schema[field]?.name}
+                  </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}
+                    <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>
+        <tbody class="spectrum-Table-body">
+          {#each sortedRows as row, idx}
+            <tr
+              on:click={() => toggleSelectRow(row)}
+              class="spectrum-Table-row"
+              class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
+              {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
+                {#if customColumnRenderer}
+                  <td class="spectrum-Table-cell spectrum-Table-cell--divider">
+                    <div class="spectrum-Table-cell-content">
+                      <svelte:component
+                        this={customColumnRenderer}
+                        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">
+                    <div class="spectrum-Table-cell-content">
+                      <CellRenderer schema={schema[field]} value={row[field]} />
+                    </div>
+                  </td>
+                {/each}
+              {/if}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .loading,
+  .container,
+  th {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
+
+  .container {
+    position: relative;
+    overflow: auto;
+    border: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+    scrollbar-width: thin;
+    scrollbar-color: var(--spectrum-global-color-gray-300)
+      var(--spectrum-global-color-gray-100);
+  }
+  .container::-webkit-scrollbar {
+    width: 18px;
+    height: 18px;
+  }
+  .container::-webkit-scrollbar-track {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .container::-webkit-scrollbar-thumb {
+    background-color: var(--spectrum-global-color-gray-300);
+    border-radius: 20px;
+    border: 4px solid var(--spectrum-global-color-gray-100);
+  }
+  .container::-webkit-scrollbar-corner {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .container.quiet {
+    border: none !important;
+  }
+  table {
+    width: 100%;
+  }
+
+  .spectrum-Table-headCell .spectrum-Icon {
+    pointer-events: all;
+    margin-left: var(
+      --spectrum-table-header-sort-icon-gap,
+      var(--spectrum-global-dimension-size-125)
+    );
+  }
+  .spectrum-Table-editIcon,
+  .spectrum-Table-autoIcon {
+    width: var(--spectrum-global-dimension-size-150);
+    height: var(--spectrum-global-dimension-size-150);
+  }
+  .spectrum-Table-editIcon {
+    opacity: 0;
+  }
+  .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
+
+  .spectrum,
+  th {
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  th {
+    vertical-align: middle;
+    height: var(--header-height);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+  .spectrum-Table-headCell-content {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    user-select: none;
+  }
+  .spectrum-Table-headCell-content .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  tbody {
+    z-index: 1;
+  }
+  tbody tr {
+    height: var(--row-height);
+  }
+  tbody tr.hidden {
+    height: calc(var(--row-height) + 1px);
+  }
+  tbody tr.offset {
+    background-color: red;
+    display: block;
+  }
+  td {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-bottom: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-top: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  tr:first-child td {
+    border-top: none !important;
+  }
+  .spectrum:not(.quiet) td.spectrum-Table-cell--divider {
+    width: 1px;
+    border-right: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  .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>

packages/bbui/src/Table/index.js

@@ -0,0 +1 @@
+export { default as Table } from "./Table.svelte"

packages/bbui/src/index.js

@@ -30,6 +30,7 @@ export { default as DatePicker } from "./DatePicker/DatePicker.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
 export { default as Context } from "./context"
+export { default as Table } from "./Table/Table.svelte"
 
 // Actions
 export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"

packages/bbui/yarn.lock

@@ -410,6 +410,41 @@
     lodash "^4.17.4"
     read-pkg-up "^7.0.0"
 
+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
+  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
+
+"@spectrum-css/button@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
+  integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
+
+"@spectrum-css/checkbox@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.1.tgz#6f36377d8bd556989ddd1dec2506dc295c5fcda8"
+  integrity sha512-fI0q2Cp6yU4ORyE6JWUSMYNgEtGf6AjYViZ2Weg3UPTYBQuWdQd8J0ZTcH38pDMyARFPRdiXgQ3KnyX5Hk5huw==
+
+"@spectrum-css/icon@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177"
+  integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ==
+
+"@spectrum-css/label@^2.0.9":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.9.tgz#792f34b906ba81118f4d0edcc81a18da1ecd57cb"
+  integrity sha512-0vXhWIZoQDTg+I6MyMpwmeJ+yQHtxkZ7lLcEqxhJ2y7JXP2ftblz2sO4+9jB11ljepeVlV+B6LF1drU8mMu82A==
+
+"@spectrum-css/table@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
+  integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
+
+"@spectrum-css/vars@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
+  integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
+
 "@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
   version "1.0.0-next.5"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"
@@ -1638,6 +1673,11 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -1,19 +1,15 @@
 <script>
   import { fade } from "svelte/transition"
   import { goto, params } from "@roxi/routify"
-  import AgGrid from "@budibase/svelte-ag-grid"
+  import { Table, Modal } from "@budibase/bbui"
 
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
   import Spinner from "components/common/Spinner.svelte"
   import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
-  import {
-    getRenderer,
-    editRowRenderer,
-    userRowRenderer,
-  } from "./cells/cellRenderers"
-  import TableLoadingOverlay from "./TableLoadingOverlay"
-  import TableHeader from "./TableHeader"
+  import CreateEditRow from "./modals/CreateEditRow.svelte"
+  import CreateEditUser from "./modals/CreateEditUser.svelte"
+  import CreateEditColumn from "./modals/CreateEditColumn.svelte"
   import "@budibase/svelte-ag-grid/dist/index.css"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
 
@@ -28,105 +24,24 @@
 
   let columnDefs = []
   let selectedRows = []
-
-  let options = {
-    defaultColDef: {
-      flex: 1,
-      filter: true,
-    },
-    rowSelection: allowEditing ? "multiple" : false,
-    rowMultiSelectWithClick: true,
-    suppressRowClickSelection: false,
-    suppressFieldDotNotation: true,
-    paginationAutoPageSize: true,
-    pagination: true,
-    enableRangeSelection: true,
-    popupParent: document.body,
-    components: {
-      customLoadingOverlay: TableLoadingOverlay,
-    },
-    loadingOverlayComponent: "customLoadingOverlay",
-    animateRows: true,
-  }
+  let editableColumn
+  let editableRow
+  let editRowModal
+  let editColumnModal
 
   $: isUsersTable = tableId === TableNames.USERS
+  $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
   $: {
     if (isUsersTable) {
-      schema.email.displayFieldName = "Email"
-      schema.roleId.displayFieldName = "Role"
+      console.log(schema)
+      schema.email.displayName = "Email"
+      schema.roleId.displayName = "Role"
       if (schema.status) {
-        schema.status.displayFieldName = "Status"
+        schema.status.displayName = "Status"
       }
     }
   }
 
-  $: {
-    // Reset selection every time data changes
-    selectedRows = []
-
-    let result = []
-    if (allowEditing) {
-      result = [
-        {
-          checkboxSelection: true,
-          lockPosition: true,
-          headerName: "Edit",
-          pinned: "left",
-          sortable: false,
-          resizable: false,
-          suppressMovable: true,
-          suppressMenu: true,
-          minWidth: 114,
-          width: 114,
-          cellRenderer: isUsersTable ? userRowRenderer : editRowRenderer,
-        },
-      ]
-    }
-
-    const canEditColumn = key => {
-      if (!allowEditing) {
-        return false
-      }
-      return !(isUsersTable && UNEDITABLE_USER_FIELDS.includes(key))
-    }
-
-    for (let [key, value] of Object.entries(schema || {})) {
-      // skip autocolumns if hiding
-      if (hideAutocolumns && value.autocolumn) {
-        continue
-      }
-      let config = {
-        headerCheckboxSelection: false,
-        headerComponent: TableHeader,
-        headerComponentParams: {
-          field: schema[key],
-          editable: canEditColumn(key),
-        },
-        headerName: value.displayFieldName || key,
-        field: key,
-        sortable: true,
-        cellRenderer: getRenderer({
-          schema: schema[key],
-          editable: true,
-          isUsersTable,
-        }),
-        cellRendererParams: {
-          selectRelationship,
-        },
-        autoHeight: true,
-        resizable: true,
-        minWidth: 200,
-      }
-      // sort auto-columns to the end if they are present
-      if (value.autocolumn) {
-        result.push(config)
-      } else {
-        result.unshift(config)
-      }
-    }
-    columnDefs = result
-  }
-
   function selectRelationship(row, fieldName) {
     if (!row?.[fieldName]?.length) {
       return
@@ -145,6 +60,20 @@
     notifier.success(`Successfully deleted ${selectedRows.length} rows`)
     selectedRows = []
   }
+
+  const editRow = row => {
+    editableRow = row
+    if (row) {
+      editRowModal.show()
+    }
+  }
+
+  const editColumn = field => {
+    editableColumn = schema?.[field]
+    if (editableColumn) {
+      editColumnModal.show()
+    }
+  }
 </script>
 
 <div>
@@ -163,17 +92,24 @@
     {/if}
   </div>
 </div>
-<div class="grid-wrapper">
-  {#key columnDefs.length}
-    <AgGrid
-      {theme}
-      {options}
-      {data}
-      {columnDefs}
-      {loading}
-      on:select={({ detail }) => (selectedRows = detail)} />
-  {/key}
-</div>
+{#key tableId}
+  <Table
+    {data}
+    {schema}
+    {loading}
+    customColumnTitle="Edit"
+    bind:selectedRows
+    showAutoColumns={!hideAutocolumns}
+    on:editcolumn={e => editColumn(e.detail)}
+    on:editrow={e => editRow(e.detail)} />
+{/key}
+
+<Modal bind:this={editRowModal}>
+  <svelte:component this={editRowComponent} row={editableRow} />
+</Modal>
+<Modal bind:this={editColumnModal}>
+  <CreateEditColumn field={editableColumn} onClosed={editColumnModal.hide} />
+</Modal>
 
 <style>
   .table-title {
@@ -206,108 +142,4 @@
   .popovers :global(button svg) {
     margin-right: var(--spacing-xs);
   }
-
-  .grid-wrapper {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .grid-wrapper :global(> *) {
-    flex: 1 1 auto;
-  }
-  :global(.grid-wrapper) {
-    --ag-modal-overlay-background-color: transparent;
-    --ag-border-color: var(--grey-3);
-    --ag-header-background-color: var(--grey-1);
-    --ag-odd-row-background-color: var(--grey-1);
-    --ag-row-border-color: var(--grey-3);
-    --ag-background-color: var(--background);
-    --ag-foreground-color: var(--ink);
-  }
-  :global(.ag-overlay-loading-center) {
-    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05) !important;
-    border-color: var(--grey-2);
-  }
-
-  :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: var(--font-sans);
-    font-weight: 600;
-    color: var(--ink);
-  }
-
-  :global(.ag-filter) {
-    background: var(--background);
-    padding: var(--spacing-s);
-    outline: none;
-    box-sizing: border-box;
-    color: var(--ink);
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans) !important;
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  :global(.ag-menu) {
-    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-xs);
-    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) !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-xs) !important;
-    border-radius: var(--border-radius-s) !important;
-    background-color: var(--grey-2) !important;
-    font-family: var(--font-sans);
-    border: var(--border-transparent) !important;
-  }
-
-  :global(.ag-picker-field-wrapper) {
-    background: var(--grey-2) !important;
-    border: var(--border-transparent) !important;
-    padding-top: var(--spacing-xs);
-    padding-bottom: var(--spacing-xs);
-  }
-
-  :global(.ag-header) {
-    height: 61px !important;
-    min-height: 61px !important;
-  }
-
-  :global(.ag-header-row) {
-    height: 60px !important;
-  }
 </style>