Add bulk cell delete featuer

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

@@ -1,19 +1,35 @@
 <script>
   import { Modal, ModalContent } from "@budibase/bbui"
   import { getContext, onMount } from "svelte"
+  import { parseCellID } from "../lib/utils"
 
-  const { selectedRows, rows, subscribe, notifications, menu } =
-    getContext("grid")
+  const {
+    selectedRows,
+    rows,
+    subscribe,
+    notifications,
+    menu,
+    selectedCellCount,
+    selectedRowCount,
+    selectedCells,
+  } = getContext("grid")
 
-  let modal
+  let rowsModal
+  let cellsModal
 
-  $: selectedRowCount = Object.values($selectedRows).length
   $: rowsToDelete = Object.entries($selectedRows)
     .map(entry => $rows.find(x => x._id === entry[0]))
     .filter(x => x != null)
 
-  // Deletion callback when confirmed
-  const performDeletion = async () => {
+  const handleBulkDeleteRequest = () => {
+    if ($selectedRowCount) {
+      rowsModal?.show()
+    } else if ($selectedCellCount) {
+      cellsModal?.show()
+    }
+  }
+
+  const bulkDeleteRows = async () => {
     const count = rowsToDelete.length
     await rows.actions.deleteRows(rowsToDelete)
     $notifications.success(`Deleted ${count} row${count === 1 ? "" : "s"}`)
@@ -22,18 +38,48 @@
     menu.actions.close()
   }
 
-  onMount(() => subscribe("request-bulk-delete", () => modal?.show()))
+  const bulkDeleteCells = async () => {
+    let changeMap = {}
+    for (let row of $selectedCells) {
+      for (let cellId of row) {
+        const { rowId, field } = parseCellID(cellId)
+        if (!changeMap[rowId]) {
+          changeMap[rowId] = {}
+        }
+        changeMap[rowId][field] = null
+      }
+    }
+    await rows.actions.bulkUpdate(changeMap)
+
+    // Ensure menu is closed, as we may have triggered this from there
+    menu.actions.close()
+  }
+
+  onMount(() => subscribe("request-bulk-delete", handleBulkDeleteRequest))
 </script>
 
-<Modal bind:this={modal}>
+<Modal bind:this={rowsModal}>
   <ModalContent
     title="Delete rows"
     confirmText="Continue"
     cancelText="Cancel"
-    onConfirm={performDeletion}
+    onConfirm={bulkDeleteRows}
     size="M"
   >
-    Are you sure you want to delete {selectedRowCount}
-    row{selectedRowCount === 1 ? "" : "s"}?
+    Are you sure you want to delete {$selectedRowCount}
+    row{$selectedRowCount === 1 ? "" : "s"}?
+  </ModalContent>
+</Modal>
+
+<Modal bind:this={cellsModal}>
+  <ModalContent
+    title="Delete cells"
+    confirmText="Continue"
+    cancelText="Cancel"
+    onConfirm={bulkDeleteCells}
+    size="M"
+  >
+    Are you sure you want to delete {$selectedCellCount}
+    cell{$selectedCellCount === 1 ? "" : "s"}?
   </ModalContent>
 </Modal>

packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte

@@ -81,6 +81,9 @@
           return handle(() => changeFocusedRow(1, e.shiftKey))
         case "Escape":
           return handle(selectedCells.actions.clear)
+        case "Delete":
+        case "Backspace":
+          return handle(() => dispatch("request-bulk-delete"))
       }
     }
 

packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte

@@ -20,6 +20,7 @@
     selectedRowCount,
     copyAllowed,
     pasteAllowed,
+    selectedCellCount,
   } = getContext("grid")
 
   let anchor
@@ -92,8 +93,12 @@
           >
             Paste
           </MenuItem>
-          <MenuItem icon="Delete" disabled={isNewRow} on:click={() => {}}>
-            Delete
+          <MenuItem
+            icon="Delete"
+            disabled={!$config.canEditRows}
+            on:click={() => dispatch("request-bulk-delete")}
+          >
+            Delete {$selectedCellCount} cells
           </MenuItem>
         {:else}
           <MenuItem