Always allow selecting rows in grids in apps, and add binding for grid selected rows

packages/client/manifest.json

@@ -6739,10 +6739,22 @@
         ]
       }
     ],
-    "context": {
-      "type": "schema",
-      "scope": "local"
-    },
+    "context": [
+      {
+        "type": "schema",
+        "scope": "local"
+      },
+      {
+        "type": "static",
+        "values": [
+          {
+            "label": "Selected rows",
+            "key": "selectedRows",
+            "type": "array"
+          }
+        ]
+      }
+    ],
     "actions": ["RefreshDatasource"]
   },
   "bbreferencefield": {

packages/client/src/components/app/GridBlock.svelte

@@ -1,8 +1,8 @@
 <script>
   // NOTE: this is not a block - it's just named as such to avoid confusing users,
   // because it functions similarly to one
-  import { getContext } from "svelte"
-  import { get } from "svelte/store"
+  import { getContext, onMount } from "svelte"
+  import { get, derived, readable } from "svelte/store"
   import { Grid } from "@budibase/frontend-core"
 
   // table is actually any datasource, but called table for legacy compatibility
@@ -34,6 +34,7 @@
   } = getContext("sdk")
 
   let grid
+  let gridContext
 
   $: columnWhitelist = parsedColumns
     ?.filter(col => col.active)
@@ -41,10 +42,12 @@
   $: schemaOverrides = getSchemaOverrides(parsedColumns)
   $: enrichedButtons = enrichButtons(buttons)
   $: parsedColumns = getParsedColumns(columns)
+  $: selectedRows = deriveSelectedRows(gridContext)
+  $: data = { selectedRows: $selectedRows }
   $: actions = [
     {
       type: ActionTypes.RefreshDatasource,
-      callback: () => grid?.getContext()?.rows.actions.refreshData(),
+      callback: () => gridContext?.rows.actions.refreshData(),
       metadata: { dataSource: table },
     },
   ]
@@ -104,13 +107,35 @@
       },
     }))
   }
+
+  const deriveSelectedRows = gridContext => {
+    if (!gridContext) {
+      return readable([])
+    }
+    return derived(
+      [gridContext.selectedRows, gridContext.rowLookupMap, gridContext.rows],
+      ([$selectedRows, $rowLookupMap, $rows]) => {
+        const rowIds = Object.entries($selectedRows || {})
+          .filter(([_, selected]) => selected)
+          .map(([rowId]) => rowId)
+        return rowIds.map(id => {
+          const idx = $rowLookupMap[id]
+          return gridContext.rows.actions.cleanRow($rows[idx])
+        })
+      }
+    )
+  }
+
+  onMount(() => {
+    gridContext = grid.getContext()
+  })
 </script>
 
 <div
   use:styleable={$component.styles}
   class:in-builder={$builderStore.inBuilder}
 >
-  <Provider {actions}>
+  <Provider {data} {actions}>
     <Grid
       bind:this={grid}
       datasource={table}
@@ -128,6 +153,7 @@
       canEditColumns={false}
       canExpandRows={false}
       canSaveSchema={false}
+      canSelectRows={true}
       showControls={false}
       notifySuccess={notificationStore.actions.success}
       notifyError={notificationStore.actions.error}

packages/client/src/utils/buttonActions.js

@@ -335,6 +335,7 @@ const exportDataHandler = async action => {
   let selection = rowSelectionStore.actions.getSelection(
     action.parameters.tableComponentId
   )
+  console.log(selection)
   if (selection.selectedRows && selection.selectedRows.length > 0) {
     try {
       const data = await API.exportRows({

packages/frontend-core/src/components/grid/cells/GutterCell.svelte

@@ -16,6 +16,8 @@
   const { config, dispatch, selectedRows } = getContext("grid")
   const svelteDispatch = createEventDispatcher()
 
+  $: selectionEnabled = $config.canSelectRows || $config.canDeleteRows
+
   const select = e => {
     e.stopPropagation()
     svelteDispatch("select")
@@ -52,7 +54,7 @@
       <div
         on:click={select}
         class="checkbox"
-        class:visible={$config.canDeleteRows &&
+        class:visible={selectionEnabled &&
           (disableNumber || rowSelected || rowHovered || rowFocused)}
       >
         <Checkbox value={rowSelected} {disabled} />
@@ -60,7 +62,7 @@
       {#if !disableNumber}
         <div
           class="number"
-          class:visible={!$config.canDeleteRows ||
+          class:visible={!selectionEnabled ||
             !(rowSelected || rowHovered || rowFocused)}
         >
           {row.__idx + 1}
@@ -117,19 +119,11 @@
   .expand {
     margin-right: 4px;
   }
-  .expand {
+  .expand:not(.visible),
+  .expand:not(.visible) :global(*) {
     opacity: 0;
+    pointer-events: none !important;
   }
-  .expand :global(.spectrum-Icon) {
-    pointer-events: none;
-  }
-  .expand.visible {
-    opacity: 1;
-  }
-  .expand.visible :global(.spectrum-Icon) {
-    pointer-events: all;
-  }
-
   .delete:hover {
     cursor: pointer;
   }

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -38,6 +38,7 @@
   export let canDeleteRows = true
   export let canEditColumns = true
   export let canSaveSchema = true
+  export let canSelectRows = false
   export let stripeRows = false
   export let collaboration = true
   export let showAvatars = true
@@ -90,6 +91,7 @@
     canDeleteRows,
     canEditColumns,
     canSaveSchema,
+    canSelectRows,
     stripeRows,
     collaboration,
     showAvatars,