Selected row + export data support for grid blocks (new table component)

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExportData.svelte

@@ -49,17 +49,20 @@
     },
   ]
 
-  $: tables = findAllMatchingComponents($selectedScreen?.props, component =>
-    component._component.endsWith("table")
-  )
-  $: tableBlocks = findAllMatchingComponents(
+  $: components = findAllMatchingComponents(
     $selectedScreen?.props,
-    component => component._component.endsWith("tableblock")
+    component => {
+      const type = component._component
+      return (
+        type.endsWith("/table") ||
+        type.endsWith("/tableblock") ||
+        type.endsWith("/gridblock")
+      )
+    }
   )
-  $: components = tables.concat(tableBlocks)
   $: componentOptions = components.map(table => ({
     label: table._instanceName,
-    value: table._component.includes("tableblock")
+    value: table._component.endsWith("/tableblock")
       ? `${table._id}-table`
       : table._id,
   }))
@@ -69,6 +72,7 @@
   $: selectedTable = components.find(
     component => component._id === selectedTableId
   )
+  $: parameters.rows = `{{ literal [${parameters.tableComponentId}].[selectedRows] }}`
 
   onMount(() => {
     if (!parameters.type) {

packages/client/manifest.json

@@ -7017,10 +7017,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
@@ -19,7 +19,6 @@
   export let columns = null
   export let onRowClick = null
   export let buttons = null
-  export let repeat = null
 
   const context = getContext("context")
   const component = getContext("component")
@@ -36,17 +35,18 @@
   } = getContext("sdk")
 
   let grid
+  let gridContext
 
-  $: columnWhitelist = parsedColumns
-    ?.filter(col => col.active)
-    ?.map(col => col.field)
+  $: parsedColumns = getParsedColumns(columns)
+  $: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
   $: 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 },
     },
   ]
@@ -68,12 +68,14 @@
 
   // Parses columns to fix older formats
   const getParsedColumns = columns => {
+    if (!columns?.length) {
+      return []
+    }
     // If the first element has an active key all elements should be in the new format
-    if (columns?.length && columns[0]?.active !== undefined) {
+    if (columns[0].active !== undefined) {
       return columns
     }
-
-    return columns?.map(column => ({
+    return columns.map(column => ({
       label: column.displayName || column.name,
       field: column.name,
       active: true,
@@ -82,7 +84,7 @@
 
   const getSchemaOverrides = columns => {
     let overrides = {}
-    columns?.forEach(column => {
+    columns.forEach(column => {
       overrides[column.field] = {
         displayName: column.label,
       }
@@ -109,6 +111,23 @@
     }))
   }
 
+  const deriveSelectedRows = gridContext => {
+    if (!gridContext) {
+      return readable([])
+    }
+    return derived(
+      [gridContext.selectedRows, gridContext.rowLookupMap, gridContext.rows],
+      ([$selectedRows, $rowLookupMap, $rows]) => {
+        return Object.entries($selectedRows || {})
+          .filter(([_, selected]) => selected)
+          .map(([rowId]) => {
+            const idx = $rowLookupMap[rowId]
+            return gridContext.rows.actions.cleanRow($rows[idx])
+          })
+      }
+    )
+  }
+
   const getSanitisedStyles = styles => {
     return {
       ...styles,
@@ -118,40 +137,44 @@
       },
     }
   }
+
+  onMount(() => {
+    gridContext = grid.getContext()
+  })
 </script>
 
 <div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
   <span style="--height:{height};">
-    <Provider {actions}>
-      <Grid
-        bind:this={grid}
-        datasource={table}
-        {API}
-        {stripeRows}
-        {quiet}
-        {initialFilter}
-        {initialSortColumn}
-        {initialSortOrder}
-        {fixedRowHeight}
-        {columnWhitelist}
-        {schemaOverrides}
-        {repeat}
-        canAddRows={allowAddRows}
-        canEditRows={allowEditRows}
-        canDeleteRows={allowDeleteRows}
-        canEditColumns={false}
-        canExpandRows={false}
-        canSaveSchema={false}
-        showControls={false}
-        notifySuccess={notificationStore.actions.success}
-        notifyError={notificationStore.actions.error}
-        buttons={enrichedButtons}
-        on:rowclick={e => onRowClick?.({ row: e.detail })}
-      />
-    </Provider>
+    <Grid
+      bind:this={grid}
+      datasource={table}
+      {API}
+      {stripeRows}
+      {quiet}
+      {initialFilter}
+      {initialSortColumn}
+      {initialSortOrder}
+      {fixedRowHeight}
+      {columnWhitelist}
+      {schemaOverrides}
+      canAddRows={allowAddRows}
+      canEditRows={allowEditRows}
+      canDeleteRows={allowDeleteRows}
+      canEditColumns={false}
+      canExpandRows={false}
+      canSaveSchema={false}
+      canSelectRows={true}
+      showControls={false}
+      notifySuccess={notificationStore.actions.success}
+      notifyError={notificationStore.actions.error}
+      buttons={enrichedButtons}
+      on:rowclick={e => onRowClick?.({ row: e.detail })}
+    />
   </span>
 </div>
 
+<Provider {data} {actions} />
+
 <style>
   div {
     display: flex;

packages/client/src/stores/rowSelection.js

@@ -15,7 +15,7 @@ const createRowSelectionStore = () => {
     const componentId = Object.keys(selection).find(
       componentId => componentId === tableComponentId
     )
-    return selection[componentId] || {}
+    return selection[componentId]
   }
 
   return {

packages/client/src/utils/buttonActions.js

@@ -333,31 +333,59 @@ const s3UploadHandler = async action => {
   }
 }
 
+/**
+ * For new configs, "rows" is defined and enriched to be the array of rows to
+ * export. For old configs it will be undefined and we need to use the legacy
+ * row selection store in combination with the tableComponentId parameter.
+ */
 const exportDataHandler = async action => {
-  let selection = rowSelectionStore.actions.getSelection(
-    action.parameters.tableComponentId
-  )
-  if (selection.selectedRows && selection.selectedRows.length > 0) {
+  let { tableComponentId, rows, type, columns, delimiter, customHeaders } =
+    action.parameters
+  let tableId
+
+  // Handle legacy configs using the row selection store
+  if (!rows?.length) {
+    const selection = rowSelectionStore.actions.getSelection(tableComponentId)
+    if (selection?.selectedRows?.length) {
+      rows = selection.selectedRows
+      tableId = selection.tableId
+    }
+  }
+
+  // Get table ID from first row if needed
+  if (!tableId) {
+    tableId = rows?.[0]?.tableId
+  }
+
+  // Handle no rows selected
+  if (!rows?.length) {
+    notificationStore.actions.error("Please select at least one row")
+  }
+  // Handle case where we're not using a DS+
+  else if (!tableId) {
+    notificationStore.actions.error(
+      "You can only export data from table datasources"
+    )
+  }
+  // Happy path when we have both rows and table ID
+  else {
     try {
+      // Flatten rows if required
+      if (typeof rows[0] !== "string") {
+        rows = rows.map(row => row._id)
+      }
       const data = await API.exportRows({
-        tableId: selection.tableId,
-        rows: selection.selectedRows,
-        format: action.parameters.type,
-        columns: action.parameters.columns?.map(
-          column => column.name || column
-        ),
-        delimiter: action.parameters.delimiter,
-        customHeaders: action.parameters.customHeaders,
+        tableId,
+        rows,
+        format: type,
+        columns: columns?.map(column => column.name || column),
+        delimiter,
+        customHeaders,
       })
-      download(
-        new Blob([data], { type: "text/plain" }),
-        `${selection.tableId}.${action.parameters.type}`
-      )
+      download(new Blob([data], { type: "text/plain" }), `${tableId}.${type}`)
     } catch (error) {
       notificationStore.actions.error("There was an error exporting the data")
     }
-  } else {
-    notificationStore.actions.error("Please select at least one row")
   }
 }
 

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,15 +54,15 @@
       <div
         on:click={select}
         class="checkbox"
-        class:visible={$config.canDeleteRows &&
+        class:visible={selectionEnabled &&
           (disableNumber || rowSelected || rowHovered || rowFocused)}
       >
         <Checkbox value={rowSelected} {disabled} />
       </div>
       {#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

@@ -41,6 +41,7 @@
   export let canDeleteRows = true
   export let canEditColumns = true
   export let canSaveSchema = true
+  export let canSelectRows = false
   export let stripeRows = false
   export let quiet = false
   export let collaboration = true
@@ -94,6 +95,7 @@
     canDeleteRows,
     canEditColumns,
     canSaveSchema,
+    canSelectRows,
     stripeRows,
     quiet,
     collaboration,

packages/frontend-core/src/components/grid/stores/ui.js

@@ -110,12 +110,11 @@ export const deriveStores = context => {
 }
 
 export const createActions = context => {
-  const { focusedCellId, selectedRows, hoveredRowId } = context
+  const { focusedCellId, hoveredRowId } = context
 
   // Callback when leaving the grid, deselecting all focussed or selected items
   const blur = () => {
     focusedCellId.set(null)
-    selectedRows.set({})
     hoveredRowId.set(null)
   }