diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
index d35e7cd515..012ab461f0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
+++ b/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",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 71637723c1..b3e4438646 100644
--- a/packages/client/manifest.json
+++ b/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
+ }
+ ]
}
}
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
new file mode 100644
index 0000000000..aae41b30c6
--- /dev/null
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 70074790ac..060c15a857 100644
--- a/packages/client/src/components/app/index.js
+++ b/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"
diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index 56c4c20d54..a8e0da85de 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -70,10 +70,12 @@
color="var(--spectrum-global-color-red-400)"
/>
- {:else if $config.allowExpandRows}
+ {:else}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index dc24fc0d64..3fead0c926 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/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};"
>
-
-
-
-
-
-
-
-
-
+ {#if showControls}
+
+
+
+ {#if showAvatars}
+
+ {/if}
+
-
- {#if showAvatars}
-
- {/if}
-
-
+ {/if}
{#if $loaded}