Add boolean cell

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

@@ -12,22 +12,25 @@
   } = getContext("sheet")
 
   const handleKeyDown = e => {
-    const api = get(selectedCellAPI)
-    if (!api) {
+    if (!get(selectedCellId)) {
+      if (e.key === "Tab") {
+        selectFirstCell()
+      }
       return
     }
+    const api = get(selectedCellAPI)
 
     // Always intercept certain key presses
     if (e.key === "Escape") {
-      api.blur()
+      api?.blur?.()
     } else if (e.key === "Tab") {
-      api.blur()
+      api?.blur?.()
       changeSelectedColumn(1)
     }
 
     // Pass the key event to the selected cell and let it decide whether to
     // capture it or not
-    const handled = api.onKeyDown?.(e)
+    const handled = api?.onKeyDown?.(e)
     if (handled) {
       return
     }
@@ -56,6 +59,10 @@
     }
   }
 
+  const selectFirstCell = () => {
+    console.log("select first")
+  }
+
   const changeSelectedColumn = delta => {
     if (!$selectedCellId) {
       return
@@ -100,7 +107,7 @@
   }
 
   const focusSelectedCell = () => {
-    $selectedCellAPI?.focus()
+    $selectedCellAPI?.focus?.()
   }
 
   onMount(() => {

packages/frontend-core/src/components/sheet/cells/BooleanCell.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { onMount } from "svelte"
+  import { Checkbox } from "@budibase/bbui"
+
+  export let value
+  export let selected = false
+  export let onChange
+  export let readonly = false
+  export let api
+
+  $: editable = selected && !readonly
+
+  const handleChange = e => {
+    onChange(e.detail)
+  }
+
+  const onKeyDown = e => {
+    if (e.key === "Enter") {
+      onChange(!value)
+      return true
+    }
+    return false
+  }
+
+  onMount(() => {
+    api = {
+      onKeyDown,
+    }
+  })
+</script>
+
+<div class="boolean-cell" class:editable>
+  <Checkbox {value} on:change={handleChange} />
+</div>
+
+<style>
+  .boolean-cell {
+    padding: 0 var(--cell-padding);
+    pointer-events: none;
+  }
+  .boolean-cell.editable {
+    pointer-events: all;
+  }
+</style>

packages/frontend-core/src/components/sheet/renderers.js

@@ -6,16 +6,17 @@ import RelationshipCell from "./cells/RelationshipCell.svelte"
 import TextCell from "./cells/TextCell.svelte"
 import BlankCell from "./cells/BlankCell.svelte"
 import LongFormCell from "./cells/LongFormCell.svelte"
+import BooleanCell from "./cells/BooleanCell.svelte"
 
 const TypeComponentMap = {
   text: TextCell,
   options: OptionsCell,
   datetime: DateCell,
-  barcodeqr: BlankCell,
+  barcodeqr: TextCell,
   longform: LongFormCell,
   array: MultiSelectCell,
   number: NumberCell,
-  boolean: BlankCell,
+  boolean: BooleanCell,
   attachment: BlankCell,
   link: RelationshipCell,
   formula: BlankCell,