Add back in functional delete row button

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

@@ -112,6 +112,15 @@
         highlighted={!hasCols || !hasRows}
         on:updatecolumns={null}
       />
+      {#if !isUsersTable}
+        <CreateRowButton
+          on:updaterows={null}
+          title="Create row"
+          modalContentComponent={CreateEditRow}
+          disabled={!hasCols}
+          highlighted={hasCols && !hasRows}
+        />
+      {/if}
       {#if isInternal}
         <CreateViewButton disabled={!hasCols || !hasRows} />
       {/if}

packages/frontend-core/src/components/sheet/DeleteButton.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { Modal, ModalContent, Button } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { selectedRows, rows, selectedCellId } = getContext("spreadsheet")
+
+  let modal
+
+  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
+  $: rowsToDelete = Object.entries($selectedRows)
+    .map(entry => {
+      if (entry[1] === true) {
+        return $rows.find(x => x._id === entry[0])
+      } else {
+        return null
+      }
+    })
+    .filter(x => x != null)
+
+  // Deletion callback when confirmed
+  const performDeletion = async () => {
+    await rows.actions.deleteRows(rowsToDelete)
+
+    // Refresh state
+    $selectedCellId = null
+    $selectedRows = {}
+  }
+</script>
+
+{#if selectedRowCount}
+  <div class="delete-button">
+    <Button icon="Delete" size="M" cta on:click={modal.show}>
+      Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
+    </Button>
+  </div>
+{/if}
+
+<Modal bind:this={modal}>
+  <ModalContent
+    title="Add screens"
+    confirmText="Continue"
+    cancelText="Cancel"
+    onConfirm={performDeletion}
+    size="M"
+  >
+    Are you sure you want to delete {selectedRowCount}
+    row{selectedRowCount === 1 ? "" : "s"}?
+  </ModalContent>
+</Modal>
+
+<style>
+  .delete-button {
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
+  }
+  .delete-button :global(.spectrum-Button) {
+    background: var(--spectrum-global-color-red-400);
+    border-color: var(--spectrum-global-color-red-400);
+  }
+  .delete-button :global(.spectrum-Button:hover) {
+    background: var(--spectrum-global-color-red-500);
+    border-color: var(--spectrum-global-color-red-500);
+  }
+</style>

packages/frontend-core/src/components/sheet/Sheet.svelte

@@ -6,7 +6,7 @@
   import { createRowsStore } from "./stores/rows"
   import { createColumnsStores } from "./stores/columns"
   import { createScrollStores } from "./stores/scroll"
-  import SheetControls from "./SheetControls.svelte"
+  import DeleteButton from "./DeleteButton.svelte"
   import SheetBody from "./SheetBody.svelte"
   import SheetRow from "./SheetRow.svelte"
   import ResizeOverlay from "./ResizeOverlay.svelte"
@@ -103,6 +103,7 @@
         {/if}
       </SheetBody>
     </div>
+    <DeleteButton />
     <ResizeOverlay />
     <ScrollOverlay />
   </div>

packages/frontend-core/src/components/sheet/SheetControls.svelte

@@ -1,31 +1,10 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
 
-  const { selectedRows, rows, selectedCellId } = getContext("spreadsheet")
+  const { rows } = getContext("spreadsheet")
 
-  let modal
-
-  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
   $: rowCount = $rows.length
-  $: rowsToDelete = Object.entries($selectedRows)
-    .map(entry => {
-      if (entry[1] === true) {
-        return $rows.find(x => x._id === entry[0])
-      } else {
-        return null
-      }
-    })
-    .filter(x => x != null)
-
-  // Deletion callback when confirmed
-  const performDeletion = async () => {
-    await rows.actions.deleteRows(rowsToDelete)
-
-    // Refresh state
-    $selectedCellId = null
-    $selectedRows = {}
-  }
 </script>
 
 <div class="controls">
@@ -37,29 +16,10 @@
   </div>
   <div class="title" />
   <div class="delete">
-    {#if selectedRowCount}
-      <ActionButton icon="Delete" size="S" on:click={modal.show}>
-        Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
-      </ActionButton>
-    {:else}
     {rowCount} row{rowCount === 1 ? "" : "s"}
-    {/if}
   </div>
 </div>
 
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Add screens"
-    confirmText="Continue"
-    cancelText="Cancel"
-    onConfirm={performDeletion}
-    size="M"
-  >
-    Are you sure you want to delete {selectedRowCount}
-    row{selectedRowCount === 1 ? "" : "s"}?
-  </ModalContent>
-</Modal>
-
 <style>
   .controls {
     display: grid;
@@ -82,18 +42,4 @@
     gap: calc(1 * var(--cell-spacing));
     margin-left: -8px;
   }
-  .delete {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    color: var(--spectrum-global-color-gray-900);
-    font-size: 14px;
-  }
-  .delete :global(.spectrum-ActionButton) {
-    color: var(--spectrum-global-color-red-600);
-  }
-  .delete :global(.spectrum-Icon) {
-    fill: var(--spectrum-global-color-red-600);
-  }
 </style>