Merge pull request #788 from Budibase/backend-ag-grid

Backend ag grid

packages/builder/cypress/integration/createAutomation.spec.js

@@ -54,7 +54,7 @@ context("Create a automation", () => {
   })
 
   it("should add row when a new row is added", () => {
-    cy.contains("backend").click()
+    cy.contains("data").click()
     cy.addRow(["Rover", 15])
     cy.reload()
     cy.contains("goodboy").should("have.text", "goodboy")

packages/builder/cypress/integration/createTable.spec.js

@@ -22,8 +22,10 @@ context("Create a Table", () => {
   })
 
   it("updates a column on the table", () => {
-    cy.contains("name").click()
-    cy.get("[data-cy='edit-column-header']").click()
+    cy.contains("header", "name")
+      .trigger("mouseover")
+      .find(".ri-pencil-line")
+      .click({ force: true })
     cy.get(".actions input")
       .first()
       .type("updated")
@@ -34,24 +36,27 @@ context("Create a Table", () => {
   })
 
   it("edits a row", () => {
-    cy.get("tbody .ri-more-line").click()
-    cy.get("[data-cy=edit-row]").click()
+    cy.get("button").contains("Edit").click()
     cy.get(".modal input").type("Updated")
     cy.contains("Save").click()
     cy.contains("RoverUpdated").should("have.text", "RoverUpdated")
   })
 
   it("deletes a row", () => {
-    cy.get("tbody .ri-more-line").click()
-    cy.get("[data-cy=delete-row]").click()
-    cy.contains("Delete Row").click()
+    cy.get(".ag-checkbox-input").check({ force: true })
+    cy.contains("Delete 1 row(s)").click()
+    cy.get(".modal").contains("Delete").click()
     cy.contains("RoverUpdated").should("not.exist")
   })
 
   it("deletes a column", () => {
-    cy.contains("name").click()
-    cy.get("[data-cy='delete-column-header']").click()
-    cy.contains("Delete Column").click()
+    cy
+    .contains("header", "name")
+    .trigger("mouseover")
+    .find(".ri-pencil-line").click({ force: true })
+    cy.contains("Delete").click()
+    cy.wait(50)
+    cy.get(".buttons").contains("Delete").click()
     cy.contains("nameupdated").should("not.exist")
   })
 

packages/builder/cypress/integration/createView.spec.js

@@ -23,10 +23,10 @@ context("Create a View", () => {
       cy.contains("Save View").click()
     })
     cy.get(".title").contains("Test View")
-    cy.get("thead th div").should($headers => {
+    cy.get("[data-cy=table-header]").then($headers => {
       expect($headers).to.have.length(3)
-      const headers = $headers.map((i, header) => Cypress.$(header).text())
-      expect(headers.get()).to.deep.eq(["group", "age", "rating"])
+      const headers = Array.from($headers).map(header => header.textContent.trim())
+      expect(headers).to.deep.eq(["group", "age", "rating"])
     })
   })
 
@@ -41,17 +41,18 @@ context("Create a View", () => {
       .find("select")
       .eq(1)
       .select("More Than")
-    cy.get("input").type(18)
+    cy.get(".menu-container").find("input").type(18)
     cy.contains("Save").click()
-    cy.get("tbody tr").should($values => {
+    cy.get("[role=rowgroup] .ag-row").get($values => {
       expect($values).to.have.length(5)
     })
   })
 
   it("creates a stats calculation view based on age", () => {
+    // Required due to responsive bug with ag grid in cypress
+    cy.viewport("macbook-15")
+
     cy.contains("Calculate").click()
-    // we may reinstate this - have commented this dropdown for now as there is only one option
-    //cy.get(".menu-container").find("select").first().select("Statistics")
     cy.get(".menu-container")
       .find("select")
       .eq(0)
@@ -62,10 +63,11 @@ context("Create a View", () => {
       .eq(1)
       .select("age")
     cy.contains("Save").click()
-    cy.get("thead th div").should($headers => {
+    cy.get(".ag-center-cols-viewport").scrollTo("100%")
+    cy.get("[data-cy=table-header]").then($headers => {
       expect($headers).to.have.length(7)
-      const headers = $headers.map((i, header) => Cypress.$(header).text())
-      expect(headers.get()).to.deep.eq([
+      const headers = Array.from($headers).map(header => header.textContent.trim())
+      expect(headers).to.deep.eq([
         "field",
         "sum",
         "min",
@@ -75,9 +77,9 @@ context("Create a View", () => {
         "avg",
       ])
     })
-    cy.get("tbody td").should($values => {
-      const values = $values.map((i, value) => Cypress.$(value).text())
-      expect(values.get()).to.deep.eq([
+    cy.get(".ag-cell").then($values => {
+      const values = Array.from($values).map(header => header.textContent.trim())
+      expect(values).to.deep.eq([
         "age",
         "155",
         "20",
@@ -90,18 +92,22 @@ context("Create a View", () => {
   })
 
   it("groups the view by group", () => {
+    // Required due to responsive bug with ag grid in cypress
+    cy.viewport("macbook-15")
+
     cy.contains("Group By").click()
     cy.get("select").select("group")
     cy.contains("Save").click()
+    cy.get(".ag-center-cols-viewport").scrollTo("100%")
     cy.contains("Students").should("be.visible")
     cy.contains("Teachers").should("be.visible")
 
-    cy.get("tbody tr")
-      .first()
-      .find("td")
-      .should($values => {
-        const values = $values.map((i, value) => Cypress.$(value).text())
-        expect(values.get()).to.deep.eq([
+    cy
+      .get(".ag-row[row-index=0]")
+      .find(".ag-cell")
+      .then($values => {
+        const values = Array.from($values).map(value => value.textContent)
+        expect(values).to.deep.eq([
           "Students",
           "70",
           "20",

packages/builder/cypress/support/commands.js

@@ -79,11 +79,13 @@ Cypress.Commands.add("createTable", tableName => {
 
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
-  cy.contains(tableName).click()
+  cy.get(".root")
+    .contains(tableName)
+    .click()
   cy.contains("Create New Column").click()
 
   // Configure column
-  cy.get(".menu-container").within(() => {
+  cy.get(".actions").within(() => {
     cy.get("input")
       .first()
       .type(columnName)
@@ -149,7 +151,7 @@ Cypress.Commands.add("addButtonComponent", () => {
 })
 
 Cypress.Commands.add("navigateToFrontend", () => {
-  cy.contains("frontend").click()
+  cy.contains("design").click()
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {

packages/builder/package.json

@@ -66,6 +66,7 @@
     "@budibase/bbui": "^1.47.0",
     "@budibase/client": "^0.2.6",
     "@budibase/colorpicker": "^1.0.1",
+    "@budibase/svelte-ag-grid": "^0.0.16",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@sentry/browser": "5.19.1",
     "@svelteschool/svelte-forms": "^0.7.0",
@@ -76,6 +77,7 @@
     "lodash": "^4.17.13",
     "mustache": "^4.0.1",
     "posthog-js": "1.4.5",
+    "remixicon": "^2.5.0",
     "shortid": "^2.2.15",
     "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "^0.1.0",

packages/builder/rollup.config.js

@@ -178,6 +178,10 @@ export default {
           src: "node_modules/@budibase/bbui/dist/bbui.css",
           dest: outputpath,
         },
+        {
+          src: "node_modules/remixicon/fonts/*",
+          dest: outputpath,
+        },
       ],
     }),
 

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

@@ -12,6 +12,7 @@
 
   $: title = $backendUiStore.selectedTable.name
   $: schema = $backendUiStore.selectedTable.schema
+  $: tableId = $backendUiStore.selectedTable._id
   $: tableView = {
     schema,
     name: $backendUiStore.selectedView.name,

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

@@ -1,130 +1,132 @@
 <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 { Button } from "@budibase/bbui"
+  import { goto, params } from "@sveltech/routify"
+  import AgGrid from "@budibase/svelte-ag-grid"
+
   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 { notifier } from "builderStore/store/notifications"
   import Spinner from "components/common/Spinner.svelte"
+  import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
+  import {
+    getRenderer,
+    editRowRenderer,
+    deleteRowRenderer,
+  } from "./cells/cellRenderers"
+  import TableLoadingOverlay from "./TableLoadingOverlay"
+  import TableHeader from "./TableHeader"
+  import "@budibase/svelte-ag-grid/dist/index.css"
 
-  const ITEMS_PER_PAGE = 10
-
-  export let schema = []
+  export let schema = {}
   export let data = []
+  export let tableId
   export let title
   export let allowEditing = false
   export let loading = false
+  export let theme = "alpine"
 
-  let currentPage = 0
+  let columnDefs = []
+  let selectedRows = []
 
-  $: 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
+  let options = {
+    defaultColDef: {
+      flex: 1,
+      filter: true,
+    },
+    rowSelection: allowEditing ? "multiple" : false,
+    rowMultiSelectWithClick: true,
+    suppressRowClickSelection: false,
+    paginationAutoPageSize: true,
+    pagination: true,
+    enableRangeSelection: true,
+    popupParent: document.body,
+    components: {
+      customLoadingOverlay: TableLoadingOverlay,
+    },
+    loadingOverlayComponent: "customLoadingOverlay",
+    animateRows: true,
+  }
+
+  $: {
+    let result = []
+    if (allowEditing) {
+      result = [
+        {
+          pinned: "left",
+          headerName: "Edit",
+          sortable: false,
+          resizable: false,
+          suppressMovable: true,
+          suppressMenu: true,
+          minWidth: 100,
+          width: 100,
+          cellRenderer: editRowRenderer,
+        },
+      ]
+    }
+
+    Object.keys(schema || {}).forEach((key, idx) => {
+      result.push({
+        headerCheckboxSelection: false,
+        checkboxSelection: idx === 0 && allowEditing,
+        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) {
     if (!row?.[fieldName]?.length) {
       return
     }
     $goto(
-      `/${$params.application}/backend/table/${tableId}/relationship/${row._id}/${fieldName}`
+      `/${$params.application}/data/table/${row.tableId}/relationship/${row._id}/${fieldName}`
     )
   }
+
+  const deleteRows = async () => {
+    const response = await api.post(`/api/${tableId}/rows`, {
+      rows: selectedRows,
+      type: "delete",
+    })
+    data = data.filter(row => !selectedRows.includes(row))
+    notifier.success(`Successfully deleted ${selectedRows.length} rows`)
+    selectedRows = []
+  }
 </script>
 
 <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 />
+      {#if selectedRows.length > 0}
+        <DeleteRowsButton {selectedRows} {deleteRows} />
+      {/if}
     </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
+  <AgGrid
+    {theme}
+    {options}
     {data}
-    bind:currentPage
-    pageItemCount={paginatedData.length}
-    {ITEMS_PER_PAGE} />
+    {columnDefs}
+    {loading}
+    on:select={({ detail }) => (selectedRows = detail)} />
 </section>
 
 <style>
@@ -138,68 +140,11 @@
     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%;
   }
@@ -213,21 +158,74 @@
     margin-bottom: var(--spacing-xl);
   }
 
-  .edit-header {
-    width: 60px;
+  :global(.ag-menu) {
+    border: var(--border-dark) !important;
   }
 
-  .edit-header:hover {
-    cursor: default;
+  :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;
     color: var(--ink);
   }
 
-  .link {
-    text-decoration: underline;
+  :global(.ag-filter) {
+    padding: var(--spacing-s);
+    outline: none;
+    box-sizing: border-box;
+    color: var(--ink);
+    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);
   }
 
-  .link:hover {
-    color: var(--grey-6);
-    cursor: pointer;
+  :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);
   }
 </style>

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

@@ -0,0 +1,125 @@
+<script>
+  import { onMount, onDestroy } from "svelte"
+  import { Modal, ModalContent } from "@budibase/bbui"
+  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
+
+  const SORT_ICON_MAP = {
+    asc: "ri-arrow-down-fill",
+    desc: "ri-arrow-up-fill",
+  }
+
+  export let field
+  export let displayName
+  export let column
+  export let enableSorting = true
+  export let showColumnMenu
+  export let progressSort
+  export let editable
+
+  let menuButton
+  let sortDirection = ""
+  let modal
+  let hovered
+  let filterActive
+
+  function toggleMenu() {
+    showColumnMenu(menuButton)
+  }
+
+  function onSort(event) {
+    progressSort(event.shiftKey)
+  }
+
+  function showModal() {
+    modal.show()
+  }
+
+  function setSort() {
+    sortDirection = column.getSort()
+  }
+
+  function setFilterActive(e) {
+    filterActive = e.column.filterActive
+  }
+
+  onMount(() => {
+    column.addEventListener("sortChanged", setSort)
+    column.addEventListener("filterActiveChanged", setFilterActive)
+  })
+
+  onDestroy(() => {
+    column.removeEventListener("sortChanged", setSort)
+    column.removeEventListener("filterActiveChanged", setFilterActive)
+  })
+</script>
+
+<header
+  on:click={onSort}
+  data-cy="table-header"
+  on:mouseover={() => (hovered = true)}
+  on:mouseleave={() => (hovered = false)}>
+  <div>
+    <span class="column-header-name">{displayName}</span>
+    <i class={`${SORT_ICON_MAP[sortDirection]} sort-icon`} />
+  </div>
+  <Modal bind:this={modal}>
+    <ModalContent
+      showCancelButton={false}
+      showConfirmButton={false}
+      title={`Edit Column: ${field.name}`}>
+      <CreateEditColumn onClosed={modal.hide} {field} />
+    </ModalContent>
+  </Modal>
+  <section class:show={hovered || filterActive}>
+    {#if editable && hovered}
+      <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" class:active={filterActive} />
+    </span>
+  </section>
+</header>
+
+<style>
+  header {
+    font-family: Inter;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    color: var(--ink);
+  }
+
+  section {
+    opacity: 0;
+    transition: 0.3s all;
+  }
+
+  section.show {
+    opacity: 1;
+  }
+
+  .sort-icon {
+    position: relative;
+    top: 2px;
+  }
+
+  i {
+    transition: 0.2s all;
+    font-size: var(--font-size-m);
+    font-weight: 500;
+  }
+
+  i:hover {
+    color: var(--blue);
+  }
+
+  i.active,
+  i:hover {
+    color: var(--blue);
+  }
+</style>

packages/builder/src/components/backend/DataTable/TableHeader/index.js

@@ -0,0 +1,35 @@
+import TableHeader from "./TableHeader.svelte"
+
+export default class TableHeaderWrapper {
+  constructor() {}
+
+  init(params) {
+    this.agParams = params
+    this.container = document.createElement("div")
+    this.container.style.height = "100%"
+    this.container.style.width = "100%"
+
+    this.headerComponent = new TableHeader({
+      target: this.container,
+      props: params,
+    })
+    this.gui = this.container
+  }
+
+  // can get called more than once, you should return the HTML element
+  getGui() {
+    return this.gui
+  }
+
+  // gets called when a new Column Definition has been set for this header
+  refresh(params) {
+    this.agParams = params
+    this.headerComponent = new TableHeader({
+      target: this.container,
+      props: params,
+    })
+  }
+
+  // optional method, gets called once, when component is destroyed
+  destroy() {}
+}

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>

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
+  }
+}

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

@@ -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>

packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte

@@ -1,27 +1,28 @@
 <script>
-  import { DropdownMenu, TextButton as Button, Icon } from "@budibase/bbui"
-  import CreateEditColumnPopover from "../popovers/CreateEditColumnPopover.svelte"
+  import {
+    DropdownMenu,
+    TextButton as Button,
+    Icon,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
+  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
-  let anchor
-  let dropdown
+  let modal
   let fieldName
 </script>
 
-<div bind:this={anchor}>
-  <Button text small on:click={dropdown.show}>
+<div>
+  <Button text small on:click={modal.show}>
     <Icon name="addcolumn" />
     Create New Column
   </Button>
 </div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <h5>Create Column</h5>
-  <CreateEditColumnPopover onClosed={dropdown.hide} />
-</DropdownMenu>
-
-<style>
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-</style>
+<Modal bind:this={modal}>
+  <ModalContent
+    showCancelButton={false}
+    showConfirmButton={false}
+    title={'Create Column'}>
+    <CreateEditColumn onClosed={modal.hide} />
+  </ModalContent>
+</Modal>

packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { TextButton, Icon, Modal, ModalContent } from "@budibase/bbui"
+  import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
+
+  export let selectedRows
+  export let deleteRows
+
+  let modal
+
+  async function confirmDeletion() {
+    await deleteRows()
+    modal.hide()
+  }
+</script>
+
+<div>
+  <TextButton small text on:click={modal.show}>
+    <Icon name="delete" />
+    Delete
+    {selectedRows.length}
+    row(s)
+  </TextButton>
+</div>
+<Modal bind:this={modal}>
+  <ModalContent
+    red
+    confirmText="Delete"
+    onConfirm={confirmDeletion}
+    title="Confirm Row Deletion">
+    Are you sure you want to delete
+    {selectedRows.length}
+    row{selectedRows.length > 1 ? 's' : ''}?
+  </ModalContent>
+</Modal>

packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let columnName
+  export let row
+  export let selectRelationship
+
+  $: count =
+    row && columnName && Array.isArray(row[columnName])
+      ? row[columnName].length
+      : 0
+</script>
+
+<div class:link={count} on:click={() => selectRelationship(row, columnName)}>
+  {count}
+  related row(s)
+</div>
+
+<style>
+  .link {
+    text-decoration: underline;
+  }
+
+  .link:hover {
+    color: var(--grey-6);
+    cursor: pointer;
+  }
+</style>

packages/builder/src/components/backend/DataTable/cells/cellRenderers.js

@@ -0,0 +1,79 @@
+import AttachmentList from "./AttachmentCell.svelte"
+import EditRow from "../modals/EditRow.svelte"
+import DeleteRow from "../modals/DeleteRow.svelte"
+import RelationshipDisplay from "./RelationshipCell.svelte"
+
+const renderers = {
+  attachment: attachmentRenderer,
+  link: linkedRowRenderer,
+}
+
+export function getRenderer(schema, editable) {
+  if (renderers[schema.type]) {
+    return renderers[schema.type](schema.options, schema.constraints, editable)
+  } else {
+    return false
+  }
+}
+
+export function deleteRowRenderer(params) {
+  const container = document.createElement("div")
+
+  new DeleteRow({
+    target: container,
+    props: {
+      row: params.data,
+    },
+  })
+
+  return container
+}
+
+export function editRowRenderer(params) {
+  const container = document.createElement("div")
+
+  new EditRow({
+    target: container,
+    props: {
+      row: params.data,
+    },
+  })
+
+  return container
+}
+
+/* eslint-disable no-unused-vars */
+function attachmentRenderer(options, constraints, editable) {
+  return params => {
+    const container = document.createElement("div")
+
+    const attachmentInstance = new AttachmentList({
+      target: container,
+      props: {
+        files: params.value || [],
+      },
+    })
+
+    return container
+  }
+}
+
+/* eslint-disable no-unused-vars */
+function linkedRowRenderer() {
+  return params => {
+    let container = document.createElement("div")
+    container.style.display = "grid"
+    container.style.height = "100%"
+
+    new RelationshipDisplay({
+      target: container,
+      props: {
+        row: params.data,
+        columnName: params.column.colId,
+        selectRelationship: params.selectRelationship,
+      },
+    })
+
+    return container
+  }
+}

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -1,26 +1,12 @@
 <script>
-  import { onMount } from "svelte"
-  import {
-    Input,
-    TextArea,
-    Button,
-    Select,
-    Toggle,
-    Label,
-  } from "@budibase/bbui"
-  import { cloneDeep, merge } from "lodash/fp"
-  import { store, backendUiStore } from "builderStore"
+  import { Input, Button, TextButton, Select, Toggle } from "@budibase/bbui"
+  import { cloneDeep } from "lodash/fp"
+  import { backendUiStore } from "builderStore"
   import { FIELDS } from "constants/backend"
   import { notifier } from "builderStore/store/notifications"
-  import ButtonGroup from "components/common/ButtonGroup.svelte"
-  import NumberBox from "components/common/NumberBox.svelte"
   import ValuesList from "components/common/ValuesList.svelte"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import Checkbox from "components/common/Checkbox.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
   import DatePicker from "components/common/DatePicker.svelte"
-  import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
-  import * as api from "../api"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   let fieldDefinitions = cloneDeep(FIELDS)
 
@@ -37,6 +23,9 @@
   let primaryDisplay =
     $backendUiStore.selectedTable.primaryDisplay == null ||
     $backendUiStore.selectedTable.primaryDisplay === field.name
+  let confirmDeleteDialog
+  let deletion
+
   $: tableOptions = $backendUiStore.tables.filter(
     table => table._id !== $backendUiStore.draftTable._id
   )
@@ -54,6 +43,16 @@
     onClosed()
   }
 
+  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 ${field.name} deleted.`)
+      onClosed()
+    }
+  }
+
   function handleFieldConstraints(event) {
     const { type, constraints } = fieldDefinitions[
       event.target.value.toUpperCase()
@@ -75,9 +74,19 @@
       field.constraints.presence = { allowEmpty: false }
     }
   }
+
+  function confirmDelete() {
+    confirmDeleteDialog.show()
+    deletion = true
+  }
+
+  function hideDeleteDialog() {
+    confirmDeleteDialog.hide()
+    deletion = false
+  }
 </script>
 
-<div class="actions">
+<div class="actions" class:hidden={deletion}>
   <Input label="Name" thin bind:value={field.name} />
 
   <Select
@@ -147,15 +156,24 @@
       thin
       bind:value={field.fieldName} />
   {/if}
-  <footer>
+  <footer class="create-column-options">
+    {#if originalName}
+      <TextButton text on:click={confirmDelete}>Delete Column</TextButton>
+    {/if}
     <Button secondary on:click={onClosed}>Cancel</Button>
     <Button primary on:click={saveColumn}>Save Column</Button>
   </footer>
 </div>
+<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}
+  onCancel={hideDeleteDialog}
+  title="Confirm Delete" />
 
 <style>
   .actions {
-    padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);
     min-width: 400px;
@@ -166,4 +184,12 @@
     justify-content: flex-end;
     gap: var(--spacing-m);
   }
+
+  :global(.create-column-options button:first-child) {
+    margin-right: auto;
+  }
+
+  .hidden {
+    display: none;
+  }
 </style>

packages/builder/src/components/backend/DataTable/modals/DeleteRow.svelte

@@ -0,0 +1,42 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
+  import * as api from "../api"
+  import { notifier } from "builderStore/store/notifications"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let row
+
+  let anchor
+  let dropdown
+  let confirmDeleteDialog
+
+  function showDelete() {
+    confirmDeleteDialog.show()
+  }
+
+  async function deleteRow() {
+    await api.deleteRow(row)
+    notifier.success("Row deleted")
+    backendUiStore.actions.rows.delete(row)
+  }
+</script>
+
+<div on:click={showDelete}><i class="ri-delete-row" /></div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  body={`Are you sure you wish to delete this row? Your data will be deleted and this action cannot be undone.`}
+  okText="Delete Row"
+  onOk={deleteRow}
+  title="Confirm Delete" />
+
+<style>
+  .ri-delete-bin-line:hover {
+    cursor: pointer;
+  }
+
+  div {
+    display: flex;
+    justify-content: center;
+  }
+</style>

packages/builder/src/components/backend/DataTable/modals/EditRow.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import { DropdownMenu, Icon, Modal, Button } from "@budibase/bbui"
+  import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
+
+  export let row
+
+  let anchor
+  let dropdown
+  let confirmDeleteDialog
+  let modal
+
+  function showModal(e) {
+    e.stopPropagation()
+    modal.show()
+  }
+</script>
+
+<Button translucent small on:click={showModal}>Edit</Button>
+<Modal bind:this={modal}>
+  <CreateEditRowModal {row} />
+</Modal>

packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte

@@ -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>

packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte

@@ -1,94 +0,0 @@
-<script>
-  import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Icon, Modal } from "@budibase/bbui"
-  import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
-  import * as api from "../api"
-  import { notifier } from "builderStore/store/notifications"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-
-  export let row
-
-  let anchor
-  let dropdown
-  let confirmDeleteDialog
-  let modal
-
-  function showModal() {
-    dropdown.hide()
-    modal.show()
-  }
-
-  function showDelete() {
-    dropdown.hide()
-    confirmDeleteDialog.show()
-  }
-
-  async function deleteRow() {
-    await api.deleteRow(row)
-    notifier.success("Row deleted")
-    backendUiStore.actions.rows.delete(row)
-  }
-</script>
-
-<div bind:this={anchor} on:click={dropdown.show}>
-  <i class="ri-more-line" />
-</div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <ul>
-    <li data-cy="edit-row" on:click={showModal}>
-      <Icon name="edit" />
-      <span>Edit</span>
-    </li>
-    <li data-cy="delete-row" on:click={showDelete}>
-      <Icon name="delete" />
-      <span>Delete</span>
-    </li>
-  </ul>
-</DropdownMenu>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  body={`Are you sure you wish to delete this row? Your data will be deleted and this action cannot be undone.`}
-  okText="Delete Row"
-  onOk={deleteRow}
-  title="Confirm Delete" />
-<Modal bind:this={modal}>
-  <CreateEditRowModal {row} />
-</Modal>
-
-<style>
-  .ri-more-line:hover {
-    cursor: pointer;
-  }
-
-  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);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-    font-size: var(--font-size-xs);
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-</style>

packages/builder/src/index.html

@@ -7,8 +7,6 @@
 
 	<title>Budibase Builder</title>
 
-	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
-  
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/external.css'>

packages/builder/src/main.js

@@ -10,6 +10,8 @@ import "/assets/Inter-ExtraBold"
 import "/assets/Inter-Black"
 import "/_builder/assets/budibase-logo.png"
 import "/_builder/assets/budibase-logo-only.png"
+import "remixicon/fonts/remixicon.css"
+
 import App from "./App.svelte"
 
 /* eslint-disable */

packages/builder/src/pages/[application]/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  $goto("../backend")
+  $goto("../data")
 </script>
 
 <!-- routify:options index=false -->

packages/builder/yarn.lock

@@ -731,6 +731,13 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
 
+"@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"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1306,6 +1313,11 @@ acorn@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
 
+ag-grid-community@^24.0.0:
+  version "24.1.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-24.1.0.tgz#1e3cab51211822e08d56f03a491b7c0deaa398e6"
+  integrity sha512-pWnWphuDcejZ8ahf6C734EpCx3XQ6dHEZWMWTlCdHNT0mZBLJ4YKCGACX+ttAEtSX2MGM3G13JncvuratUlYag==
+
 ajv@^6.5.5:
   version "6.12.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
@@ -5298,6 +5310,11 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
+remixicon@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
+  integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -5918,13 +5935,21 @@ string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
+string.prototype.trimend@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
+string.prototype.trimend@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz#6ddd9a8796bc714b489a3ae22246a208f37bfa46"
+  integrity sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+
 string.prototype.trimleft@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc"
@@ -5941,13 +5966,21 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
+string.prototype.trimstart@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
+string.prototype.trimstart@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz#22d45da81015309cd0cdd79787e8919fc5c613e7"
+  integrity sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"

packages/standard-components/src/DataTable.svelte

@@ -1,201 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { cssVars } from "./cssVars"
-  import ArrowUp from "./icons/ArrowUp.svelte"
-  import ArrowDown from "./icons/ArrowDown.svelte"
-  import fsort from "fast-sort"
-  import fetchData from "./fetchData.js"
-  import { isEmpty } from "lodash/fp"
-  import AttachmentList from "./attachments/AttachmentList.svelte"
-
-  export let backgroundColor
-  export let color
-  export let stripeColor
-  export let borderColor
-  export let datasource
-  export let _bb
-
-  let data = []
-  let headers = []
-  let sort = {}
-  let sorted = []
-  let schema = {}
-  let store = _bb.store
-
-  $: cssVariables = {
-    backgroundColor,
-    color,
-    stripeColor,
-    borderColor,
-  }
-
-  $: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data
-
-  async function fetchTable(tableId) {
-    const FETCH_TABLE_URL = `/api/tables/${tableId}`
-    const response = await _bb.api.get(FETCH_TABLE_URL)
-    const table = await response.json()
-    return table.schema
-  }
-
-  onMount(async () => {
-    if (!isEmpty(datasource)) {
-      data = await fetchData(datasource, $store)
-
-      // Get schema for datasource
-      // Views with "Calculate" applied provide their own schema.
-      // For everything else, use the tableId property to pull to table schema
-      if (datasource.schema) {
-        schema = datasource.schema
-        headers = Object.keys(schema).filter(shouldDisplayField)
-      } else {
-        schema = await fetchTable(datasource.tableId)
-        headers = Object.keys(schema).filter(shouldDisplayField)
-      }
-    }
-  })
-
-  const shouldDisplayField = name => {
-    if (name.startsWith("_")) return false
-    // always 'row'
-    if (name === "type") return false
-    // tables are always tied to a single tableId, this is irrelevant
-    if (name === "tableId") return false
-    return true
-  }
-
-  function sortColumn(column) {
-    if (column === sort.column) {
-      sort = {
-        direction: sort.direction === "asc" ? "desc" : null,
-        column: sort.direction === "asc" ? sort.column : null,
-      }
-      return
-    }
-
-    sort = {
-      column,
-      direction: "asc",
-    }
-  }
-</script>
-
-<table use:cssVars={cssVariables}>
-  <thead>
-    <tr>
-      {#each headers as header}
-        <th on:click={() => sortColumn(header)}>
-          <span>
-            {header}
-            {#if sort.column === header}
-              <svelte:component
-                this={sort.direction === 'asc' ? ArrowDown : ArrowUp}
-                style="height: 1em;" />
-            {/if}
-          </span>
-        </th>
-      {/each}
-    </tr>
-  </thead>
-  <tbody>
-    {#each sorted as row (row._id)}
-      <tr>
-        {#each headers as header}
-          {#if schema[header] !== undefined}
-            <!-- Rudimentary solution for attachments on array given this entire table will be replaced by AG Grid -->
-            {#if schema[header] && schema[header].type === 'attachment'}
-              <AttachmentList files={row[header]} />
-            {:else if schema[header] && schema[header].type === 'link'}
-              <td>{row[header] ? row[header].length : 0} related row(s)</td>
-            {:else}
-              <td>{row[header] == null ? '' : row[header]}</td>
-            {/if}
-          {/if}
-        {/each}
-      </tr>
-    {/each}
-  </tbody>
-</table>
-
-<style>
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    overflow: scroll; /* Scrollbar are always visible */
-    overflow: auto; /* Scrollbar is displayed as it's needed */
-  }
-
-  /* Zebra striping */
-  tr:nth-of-type(odd) {
-    background: var(--stripeColor);
-  }
-
-  th {
-    background-color: var(--backgroundColor);
-    color: var(--color);
-    font-weight: bold;
-    text-transform: capitalize;
-    cursor: pointer;
-  }
-
-  th span {
-    display: flex;
-    align-items: center;
-  }
-
-  td,
-  th {
-    padding: 16px;
-    border: 1px solid var(--borderColor);
-    text-align: left;
-  }
-
-  @media only screen and (max-width: 760px),
-    (min-device-width: 768px) and (max-device-width: 1024px) {
-    table {
-      width: 100%;
-    }
-
-    /* Force table to not be like tables anymore */
-    table,
-    thead,
-    tbody,
-    th,
-    td,
-    tr {
-      display: block;
-    }
-
-    /* Hide table headers (but not display: none;, for accessibility) */
-    thead tr {
-      position: absolute;
-      top: -9999px;
-      left: -9999px;
-    }
-
-    tr {
-      border: 1px solid var(--borderColor);
-    }
-
-    td {
-      /* Behave  like a "row" */
-      border: none;
-      border-bottom: 1px solid #eee;
-      position: relative;
-      padding-left: 10%;
-    }
-
-    td:before {
-      /* Now like a table header */
-      position: absolute;
-      /* Top/left values mimic padding */
-      top: 6px;
-      left: 6px;
-      width: 45%;
-      padding-right: 10px;
-      white-space: nowrap;
-      /* Label the data */
-      content: attr(data-column);
-    }
-  }
-</style>