diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 8febaf44ff..9f93b6c4ff 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -2,6 +2,7 @@
// 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 { Grid } from "@budibase/frontend-core"
// table is actually any datasource, but called table for legacy compatibility
@@ -16,12 +17,21 @@
export let fixedRowHeight = null
export let columns = null
export let onRowClick = null
+ export let buttons = null
+ const context = getContext("context")
const component = getContext("component")
- const { styleable, API, builderStore, notificationStore } = getContext("sdk")
+ const {
+ styleable,
+ API,
+ builderStore,
+ notificationStore,
+ enrichButtonActions,
+ } = getContext("sdk")
$: columnWhitelist = columns?.map(col => col.name)
$: schemaOverrides = getSchemaOverrides(columns)
+ $: parsedButtons = parseButtons(buttons)
const getSchemaOverrides = columns => {
let overrides = {}
@@ -33,6 +43,20 @@
})
return overrides
}
+
+ const parseButtons = buttons => {
+ if (!buttons?.length) {
+ return null
+ }
+ return buttons.map(settings => ({
+ size: "M",
+ text: settings.text,
+ type: settings.type,
+ onClick: async () => {
+ return await enrichButtonActions(settings.onClick, get(context))()
+ },
+ }))
+ }
onRowClick?.({ row: e.detail })}
/>
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 1d77f3e2da..77089d648b 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -24,9 +24,12 @@ import BlockComponent from "components/BlockComponent.svelte"
import { ActionTypes } from "./constants"
import { fetchDatasourceSchema } from "./utils/schema.js"
import { getAPIKey } from "./utils/api.js"
+import { enrichButtonActions } from "./utils/buttonActions.js"
export default {
API,
+
+ // Stores
authStore,
notificationStore,
routeStore,
@@ -41,13 +44,20 @@ export default {
currentRole,
confirmationStore,
roleStore,
+
+ // Utils
styleable,
linkable,
getAction,
fetchDatasourceSchema,
- Provider,
- ActionTypes,
getAPIKey,
+ enrichButtonActions,
+
+ // Components
+ Provider,
Block,
BlockComponent,
+
+ // Constants
+ ActionTypes,
}
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index dcc76b9c75..d10eb25528 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -15,7 +15,7 @@
$: style = getStyle(width, selectedUser)
const getStyle = (width, selectedUser) => {
- let style = `flex: 0 0 ${width}px;`
+ let style = width === "auto" ? "width: auto;" : `flex: 0 0 ${width}px;`
if (selectedUser) {
style += `--user-color:${selectedUser.color};`
}
diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
new file mode 100644
index 0000000000..4acd8b6b70
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+ {#each buttons as button}
+
+ {/each}
+
+
+
+
+
+
+
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index e2ecd0f968..285282ddf7 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -48,6 +48,7 @@
export let fixedRowHeight = null
export let notifySuccess = null
export let notifyError = null
+ export let buttons = null
// Unique identifier for DOM nodes inside this instance
const rand = Math.random()
@@ -99,6 +100,7 @@
fixedRowHeight,
notifySuccess,
notifyError,
+ buttons,
})
// Set context for children to consume
diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
index 0bb2a51fb4..559c465b86 100644
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -3,6 +3,7 @@
import GridScrollWrapper from "./GridScrollWrapper.svelte"
import GridRow from "./GridRow.svelte"
import { BlankRowID } from "../lib/constants"
+ import ButtonColumn from "./ButtonColumn.svelte"
const {
bounds,
@@ -13,6 +14,7 @@
dispatch,
isDragging,
config,
+ props,
} = getContext("grid")
let body
@@ -54,6 +56,9 @@
/>
{/if}
+ {#if $props.buttons?.length}
+
+ {/if}