Add initial grid block, and update grid to keep indentation consistent when row expansion is disabled

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json

@@ -3,6 +3,7 @@
     "name": "Blocks",
     "icon": "Article",
     "children": [
+      "gridblock",
       "tableblock",
       "cardsblock",
       "repeaterblock",

packages/client/manifest.json

@@ -5225,5 +5225,25 @@
       "type": "schema",
       "suffix": "repeater"
     }
+  },
+  "gridblock": {
+    "block": true,
+    "name": "Grid block",
+    "icon": "Table",
+    "styles": [
+      "size"
+    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
+    "settings": [
+      {
+        "type": "table",
+        "label": "Table",
+        "key": "table",
+        "required": true
+      }
+    ]
   }
 }

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

@@ -0,0 +1,37 @@
+<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 { Grid } from "@budibase/frontend-core"
+
+  export let table
+  export let allowAddRows
+  export let allowEditRows
+  export let allowDeleteRows
+
+  const component = getContext("component")
+  const { styleable, API } = getContext("sdk")
+</script>
+
+<div use:styleable={$component.styles}>
+  <Grid
+    tableId={table?.tableId}
+    {API}
+    {allowAddRows}
+    {allowEditRows}
+    {allowDeleteRows}
+    showControls={false}
+    allowAddColumns={false}
+    allowEditColumns={false}
+    allowExpandRows={false}
+  />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+  }
+</style>

packages/client/src/components/app/index.js

@@ -36,6 +36,7 @@ export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
 export { default as grid } from "./Grid.svelte"
 export { default as sidepanel } from "./SidePanel.svelte"
+export { default as gridblock } from "./GridBlock.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"

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

@@ -70,10 +70,12 @@
           color="var(--spectrum-global-color-red-400)"
         />
       </div>
-    {:else if $config.allowExpandRows}
+    {:else}
       <div
         class="expand"
-        class:visible={!disableExpand && (rowFocused || rowHovered)}
+        class:visible={$config.allowExpandRows &&
+          !disableExpand &&
+          (rowFocused || rowHovered)}
       >
         <Icon name="Maximize" hoverable size="S" on:click={expand} />
       </div>

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

@@ -43,6 +43,9 @@
   export let stripeRows = false
   export let collaboration = true
   export let showAvatars = true
+  export let showControls = true
+
+  allowExpandRows = false
 
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
@@ -117,22 +120,24 @@
   class:stripe={$config.stripeRows}
   style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
 >
-  <div class="controls">
-    <div class="controls-left">
-      <AddRowButton />
-      <AddColumnButton />
-      <slot name="controls" />
-      <SortButton />
-      <HideColumnsButton />
-      <ColumnWidthButton />
-      <RowHeightButton />
+  {#if showControls}
+    <div class="controls">
+      <div class="controls-left">
+        <AddRowButton />
+        <AddColumnButton />
+        <slot name="controls" />
+        <SortButton />
+        <HideColumnsButton />
+        <ColumnWidthButton />
+        <RowHeightButton />
+      </div>
+      <div class="controls-right">
+        {#if showAvatars}
+          <UserAvatars />
+        {/if}
+      </div>
     </div>
-    <div class="controls-right">
-      {#if showAvatars}
-        <UserAvatars />
-      {/if}
-    </div>
-  </div>
+  {/if}
   {#if $loaded}
     <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
       <div class="grid-data-inner">