windmill-components 1.305.6 → 1.306.8

package/package/assets/app.css

@@ -117,3 +117,24 @@
 		}
 	}
 }
+
+.grid-cell-centered {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.grid-cell-centered .svelte-select {
+	height: 32px !important;
+}
+
+.grid-cell-centered .selected-item {
+	margin-top: -4px;
+}
+
+.ol-overlaycontainer-stopevent {
+	@apply flex flex-col justify-start items-end;
+}
+.ol-control button {
+	@apply w-7 h-7 center-center bg-surface border  text-secondary 
+	rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
+}

package/package/components/apps/components/buttons/AppButton.svelte

@@ -43,11 +43,11 @@ if (controls) {
     $componentControl[id] = controls;
 }
 let runnableComponent;
+let confirmedCallback = undefined;
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
 $: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
-let confirmedCallback = undefined;
 async function handleBeforeIcon() {
     if (resolvedConfig.beforeIcon) {
         beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
@@ -180,13 +180,17 @@ let css = initCss($app.css?.buttoncomponent, customCss);
 				{loading}
 			>
 				{#if resolvedConfig.beforeIcon}
-					<div class="min-w-4" bind:this={beforeIconComponent} />
+					{#key resolvedConfig.beforeIcon}
+						<div class="min-w-4" bind:this={beforeIconComponent} />
+					{/key}
 				{/if}
 				{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
 					<div>{resolvedConfig.label.toString()}</div>
 				{/if}
 				{#if resolvedConfig.afterIcon}
-					<div class="min-w-4" bind:this={afterIconComponent} />
+					{#key resolvedConfig.afterIcon}
+						<div class="min-w-4" bind:this={afterIconComponent} />
+					{/key}
 				{/if}
 			</Button>
 		{/key}

package/package/components/apps/components/display/AppDownload.svelte

@@ -23,16 +23,16 @@ const { app, worldStore } = getContext('AppViewerContext');
 initOutput($worldStore, id, {});
 let beforeIconComponent;
 let afterIconComponent;
-$: resolvedConfig.beforeIcon && handleBeforeIcon();
-$: resolvedConfig.afterIcon && handleAfterIcon();
+$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
+$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
 async function handleBeforeIcon() {
     if (resolvedConfig.beforeIcon) {
-        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
     }
 }
 async function handleAfterIcon() {
     if (resolvedConfig.afterIcon) {
-        afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
     }
 }
 let css = initCss($app.css?.downloadcomponent, customCss);
@@ -87,14 +87,18 @@ let css = initCss($app.css?.downloadcomponent, customCss);
 				nonCaptureEvent
 			>
 				<span class="truncate inline-flex gap-2 items-center">
-					{#if resolvedConfig.beforeIcon && beforeIconComponent}
-						<svelte:component this={beforeIconComponent} size={14} />
+					{#if resolvedConfig.beforeIcon}
+						{#key resolvedConfig.beforeIcon}
+							<div class="min-w-4" bind:this={beforeIconComponent} />
+						{/key}
 					{/if}
 					{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
 						<div>{resolvedConfig.label}</div>
 					{/if}
-					{#if resolvedConfig.afterIcon && afterIconComponent}
-						<svelte:component this={afterIconComponent} size={14} />
+					{#if resolvedConfig.afterIcon}
+						{#key resolvedConfig.afterIcon}
+							<div class="min-w-4" bind:this={afterIconComponent} />
+						{/key}
 					{/if}
 				</span>
 			</Button>

package/package/components/apps/components/display/AppHtml.svelte

@@ -2,21 +2,18 @@
 import { initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 export let id;
 export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, mode } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
 let result = undefined;
-let h = undefined;
-let w = undefined;
 let css = initCss($app.css?.htmlcomponent, customCss);
 </script>
 
@@ -35,8 +32,6 @@ let css = initCss($app.css?.htmlcomponent, customCss);
 		e?.preventDefault()
 	}}
 	class="h-full w-full"
-	bind:clientHeight={h}
-	bind:clientWidth={w}
 >
 	<RunnableWrapper
 		{outputs}
@@ -47,22 +42,10 @@ let css = initCss($app.css?.htmlcomponent, customCss);
 		bind:initializing
 		bind:result
 	>
-		{#key result}
-			<iframe
-				frameborder="0"
-				style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
-				class={twMerge('p-0', css?.container?.class, 'wm-html')}
-				title="sandbox"
-				srcdoc={result
-					? '<base target="_parent" /><scr' +
-					  `ipt type="application/javascript" src="/tailwind.js"></script>` +
-					  result
-					: ''}
-			/>
-		{/key}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		{#if $mode == 'dnd'}
-			<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
-		{/if}
+		<div class="w-full h-full overflow-auto">
+			{#key result}
+				{@html result}
+			{/key}
+		</div>
 	</RunnableWrapper>
 </div>

package/package/components/apps/components/display/AppHtml.svelte.d.ts

@@ -10,8 +10,6 @@ declare const __propDef: {
         render: boolean;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/components/display/AppMap.svelte

@@ -1,6 +1,5 @@
 <script>import { getContext } from 'svelte';
 import { initCss } from '../../utils';
-import { InputValue } from '../helpers';
 import { twMerge } from 'tailwind-merge';
 import { Map, View, Feature } from 'ol';
 import { useGeographic } from 'ol/proj';
@@ -8,9 +7,12 @@ import { OSM, Vector as VectorSource } from 'ol/source';
 import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
 import { Point } from 'ol/geom';
 import { defaults as defaultControls } from 'ol/control';
-import { findGridItem, initOutput } from '../../editor/appUtils';
+import { findGridItem, initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { Style, Circle, Fill, Stroke, Text } from 'ol/style';
 const LAYER_NAME = {
     MARKER: 'Marker'
 };
@@ -18,7 +20,9 @@ export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
+export let extraKey = undefined;
 const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } = getContext('AppViewerContext');
+const resolvedConfig = initConfig(components['mapcomponent'].initialData.configuration, configuration);
 let outputs = initOutput($worldStore, id, {
     mapRegion: {
         topLeft: { lat: 0, lon: 0 },
@@ -27,18 +31,13 @@ let outputs = initOutput($worldStore, id, {
 });
 let map = undefined;
 let mapElement = undefined;
-let longitude = undefined;
-let latitude = undefined;
-let zoom = undefined;
-// If string, it's a JSON file read as text
-let markers = undefined;
-$: if (map && longitude && latitude) {
-    map.getView().setCenter([longitude, latitude]);
+$: if (map && resolvedConfig.longitude && resolvedConfig.latitude) {
+    map.getView().setCenter([resolvedConfig.longitude, resolvedConfig.latitude]);
 }
-$: if (map && zoom) {
-    map.getView().setZoom(zoom);
+$: if (map && resolvedConfig.zoom) {
+    map.getView().setZoom(resolvedConfig.zoom);
 }
-$: if (map && markers) {
+$: if (map && resolvedConfig.markers) {
     updateMarkers();
 }
 function selectComponent() {
@@ -56,12 +55,12 @@ function getLayersByName(name) {
 function getMarkerArray() {
     let array = undefined;
     try {
-        if (typeof markers === 'string') {
-            const json = JSON.parse(markers);
+        if (typeof resolvedConfig.markers === 'string') {
+            const json = JSON.parse(resolvedConfig.markers);
             array = Array.isArray(json) ? json : [json];
         }
         else {
-            array = markers;
+            array = resolvedConfig.markers;
         }
         return array?.filter((m) => !isNaN(+m.lat) && !isNaN(+m.lon));
     }
@@ -73,24 +72,34 @@ function getMarkerArray() {
 function createMarkerLayers() {
     const markerArray = getMarkerArray();
     return markerArray?.map((m) => {
+        const feature = new Feature({
+            geometry: new Point([+m.lon, +m.lat]),
+            name: m.title
+        });
+        feature.setStyle(new Style({
+            image: new Circle({
+                radius: m.radius ?? 7,
+                fill: new Fill({ color: m.color ?? '#dc2626' }),
+                stroke: new Stroke({ width: m.strokeWidth ?? 3, color: m.strokeColor ?? '#fca5a5' })
+            }),
+            text: new Text({
+                text: m.title,
+                font: '12px Calibri,sans-serif',
+                fill: new Fill({ color: '#000' }),
+                stroke: new Stroke({
+                    color: '#fff',
+                    width: 2
+                }),
+                offsetY: -15
+            })
+        }));
         return new VectorLayer({
             properties: {
                 name: LAYER_NAME.MARKER
             },
             source: new VectorSource({
-                features: [
-                    new Feature({
-                        geometry: new Point([+m.lon, +m.lat]),
-                        name: m.title
-                    })
-                ]
-            }),
-            style: {
-                'circle-radius': m.radius ?? 7,
-                'circle-fill-color': m.color ?? '#dc2626',
-                'circle-stroke-width': m.strokeWidth ?? 3,
-                'circle-stroke-color': m.strokeColor ?? '#fca5a5'
-            }
+                features: [feature]
+            })
         });
     });
 }
@@ -116,8 +125,8 @@ $: if (!map && mapElement) {
             ...(createMarkerLayers() || [])
         ],
         view: new View({
-            center: [longitude ?? 0, latitude ?? 0],
-            zoom: zoom ?? 2
+            center: [resolvedConfig.longitude ?? 0, resolvedConfig.latitude ?? 0],
+            zoom: resolvedConfig.zoom ?? 2
         }),
         controls: defaultControls({
             attribution: false
@@ -125,9 +134,21 @@ $: if (!map && mapElement) {
     });
     updateRegionOutput();
 }
+let previousLock = undefined;
+function updateInteractions(map) {
+    if (previousLock === resolvedConfig.lock) {
+        return;
+    }
+    previousLock = resolvedConfig.lock;
+    map.getInteractions().forEach((i) => {
+        i.setActive(!resolvedConfig.lock);
+    });
+    map.changed();
+}
+$: map && resolvedConfig && updateInteractions(map);
 let css = initCss($app.css?.mapcomponent, customCss);
 function updateRegionOutput() {
-    if (map) {
+    if (map && !resolvedConfig.lock) {
         let extent = map.getView().calculateExtent(map.getSize());
         const [left, bottom, right, top] = extent;
         if (outputs?.mapRegion) {
@@ -162,10 +183,16 @@ function handleSyncRegion() {
 }
 </script>
 
-<InputValue key="longitude" {id} input={configuration.longitude} bind:value={longitude} />
-<InputValue key="latitude" {id} input={configuration.latitude} bind:value={latitude} />
-<InputValue key="zoom" {id} input={configuration.zoom} bind:value={zoom} />
-<InputValue key="markers" {id} input={configuration.markers} bind:value={markers} />
+{#each Object.entries(components['mapcomponent'].initialData.configuration) as [key, initialConfig] (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+		{initialConfig}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
@@ -201,38 +228,3 @@ function handleSyncRegion() {
 		{/if}
 	</div>
 {/if}
-
-<style global>
-	:global(.ol-overlaycontainer-stopevent) {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: flex-start
-}
-	:global(.ol-control) :global(button) {
-    margin-top: 0.25rem;
-    margin-right: 0.25rem;
-    height: 1.75rem;
-    width: 1.75rem;
-    border-radius: 0.25rem;
-    border-width: 1px;
-    --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-text-secondary) / var(--tw-text-opacity));
-    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    transition-duration: 200ms;
-    display: flex;
-    justify-content: center;
-    align-items: center
-}
-	:global(.ol-control) :global(button:hover) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity))
-}
-	:global(.ol-control) :global(button:focus) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity))
-}</style>

package/package/components/apps/components/display/AppMap.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         configuration: RichConfigurations;
         customCss?: ComponentCustomCSS<'mapcomponent'> | undefined;
         render: boolean;
+        extraKey?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/display/AppMenu.svelte

@@ -25,19 +25,19 @@ let outputs = initOutput($worldStore, id, {
     }
 });
 const resolvedConfig = initConfig(components['menucomponent'].initialData.configuration, configuration);
+let css = initCss($app.css?.menucomponent, customCss);
 let beforeIconComponent;
 let afterIconComponent;
-let css = initCss($app.css?.menucomponent, customCss);
-$: resolvedConfig.beforeIcon && handleBeforeIcon();
-$: resolvedConfig.afterIcon && handleAfterIcon();
+$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
+$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
 async function handleBeforeIcon() {
     if (resolvedConfig.beforeIcon) {
-        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
     }
 }
 async function handleAfterIcon() {
     if (resolvedConfig.afterIcon) {
-        afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
     }
 }
 </script>
@@ -86,14 +86,18 @@ async function handleAfterIcon() {
 					nonCaptureEvent
 				>
 					<span class="truncate inline-flex gap-2 items-center">
-						{#if resolvedConfig.beforeIcon && beforeIconComponent}
-							<svelte:component this={beforeIconComponent} size={14} />
+						{#if resolvedConfig.beforeIcon}
+							{#key resolvedConfig.beforeIcon}
+								<div class="min-w-4" bind:this={beforeIconComponent} />
+							{/key}
 						{/if}
 						{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
 							<div>{resolvedConfig.label}</div>
 						{/if}
-						{#if resolvedConfig.afterIcon && afterIconComponent}
-							<svelte:component this={afterIconComponent} size={14} />
+						{#if resolvedConfig.afterIcon}
+							{#key resolvedConfig.afterIcon}
+								<div class="min-w-4" bind:this={afterIconComponent} />
+							{/key}
 						{/if}
 					</span>
 				</Button>

package/package/components/apps/components/display/AppStatCard.svelte

@@ -18,10 +18,10 @@ let resolvedConfig = initConfig(components['statcomponent'].initialData.configur
 initOutput($worldStore, id, {});
 let css = initCss($app.css?.statcomponent, customCss);
 let iconComponent;
-$: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && handleIcon();
+$: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && iconComponent && handleIcon();
 async function handleIcon() {
     if (resolvedConfig?.media?.configuration?.icon?.icon) {
-        iconComponent = await loadIcon(resolvedConfig.media.configuration.icon.icon);
+        iconComponent = await loadIcon(resolvedConfig?.media?.configuration?.icon?.icon, iconComponent, 34, undefined, undefined);
     }
 }
 $: isIcon = resolvedConfig.media?.selected == 'icon';
@@ -66,8 +66,10 @@ $: isIcon = resolvedConfig.media?.selected == 'icon';
 			style={css?.media?.style}
 		>
 			{#if isIcon}
-				{#if resolvedConfig?.media && iconComponent}
-					<svelte:component this={iconComponent} size={24} />
+				{#if resolvedConfig?.media}
+					{#key resolvedConfig.media}
+						<div class="min-w-4 text-primary" bind:this={iconComponent} />
+					{/key}
 				{/if}
 			{:else}
 				<Loader loading={resolvedConfig?.media?.configuration?.image?.source == undefined}>

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -1,6 +1,6 @@
 <script>import { GridApi, createGrid } from 'ag-grid-community';
 import { isObject, sendUserToast } from '../../../../../utils';
-import { getContext } from 'svelte';
+import { SvelteComponent, getContext, onDestroy } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { initConfig, initOutput } from '../../../editor/appUtils';
 import { components } from '../../../editor/component';
@@ -13,6 +13,7 @@ import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { initCss } from '../../../utils';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';
+import AppAggridTableActions from './AppAggridTableActions.svelte';
 // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 export let id;
 export let componentInput;
@@ -20,7 +21,11 @@ export let configuration;
 export let initializing = undefined;
 export let render;
 export let customCss = undefined;
-const { app, worldStore, selectedComponent, componentControl, darkMode } = getContext('AppViewerContext');
+export let actions = undefined;
+const context = getContext('AppViewerContext');
+const iterContext = getContext('ListWrapperContext');
+const listInputs = getContext('ListInputs');
+const { app, worldStore, selectedComponent, componentControl, darkMode } = context;
 const rowHeights = {
     normal: 40,
     compact: 30,
@@ -59,6 +64,7 @@ let outputs = initOutput($worldStore, id, {
     page: 0,
     newChange: { row: 0, column: '', value: undefined },
     ready: undefined,
+    inputs: {},
     filters: {},
     displayedRowCount: 0
 });
@@ -75,8 +81,14 @@ function toggleRow(row) {
         if (!deepEqual(outputs?.selectedRow?.peak(), data)) {
             outputs?.selectedRow.set(data);
         }
+        if (iterContext && listInputs) {
+            listInputs.set(id, { selectedRow: data, selectedRowIndex: selectedRowIndex });
+        }
     }
 }
+onDestroy(() => {
+    listInputs?.remove(id);
+});
 function toggleRows(rows) {
     if (rows.length === 0) {
         outputs?.selectedRows.set([]);
@@ -111,16 +123,93 @@ function onCellValueChanged(event) {
 let extraConfig = resolvedConfig.extraConfig;
 let api = undefined;
 let eGui;
-$: loaded && eGui && mountGrid();
 let state = undefined;
+$: loaded && eGui && mountGrid();
+const cachedDivs = new Map();
+function refreshActions(actions) {
+    if (!deepEqual(actions, lastActions)) {
+        lastActions = [...actions];
+        cachedDivs.forEach((cachedDiv) => {
+            cachedDiv.svelteComponent.$destroy();
+            cachedDiv.div.remove();
+        });
+        cachedDivs.clear();
+        updateOptions();
+    }
+}
+let lastActions = undefined;
+$: actions && refreshActions(actions);
+let inputs = {};
+function actionRenderer(params) {
+    const { rowIndex, data: row } = params;
+    if (rowIndex === -1 || actions == undefined || actions?.length == 0) {
+        return null;
+    }
+    if (cachedDivs.has(rowIndex)) {
+        return cachedDivs.get(rowIndex)?.div;
+    }
+    const div = document.createElement('div');
+    div.classList.add('flex', 'flex-row', 'items-center', 'w-full', 'h-full');
+    const svelteComponent = new AppAggridTableActions({
+        target: div,
+        props: {
+            id: id,
+            actions,
+            rowIndex,
+            row,
+            render,
+            wrapActions: resolvedConfig.wrapActions,
+            onSet: (id, value) => {
+                if (!inputs[id]) {
+                    inputs[id] = { [rowIndex]: value };
+                }
+                else {
+                    inputs[id] = { ...inputs[id], [rowIndex]: value };
+                }
+                outputs?.inputs.set(inputs, true);
+            },
+            onRemove: (id) => {
+                if (inputs?.[id] == undefined) {
+                    return;
+                }
+                delete inputs[id][rowIndex];
+                inputs[id] = { ...inputs[id] };
+                if (Object.keys(inputs?.[id] ?? {}).length == 0) {
+                    delete inputs[id];
+                    inputs = { ...inputs };
+                }
+                outputs?.inputs.set(inputs, true);
+            }
+        },
+        context: new Map([['AppViewerContext', context]])
+    });
+    cachedDivs.set(rowIndex, {
+        div,
+        actions,
+        svelteComponent
+    });
+    return div;
+}
 function mountGrid() {
     if (eGui) {
         try {
+            let columnDefs = Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
+                ? [...resolvedConfig?.columnDefs] // Clone to avoid direct mutation
+                : [];
+            // Add the action column if actions are defined
+            if (actions && actions.length > 0) {
+                columnDefs.push({
+                    headerName: 'Actions',
+                    cellRenderer: actionRenderer,
+                    autoHeight: true,
+                    cellStyle: { textAlign: 'center' },
+                    cellClass: 'grid-cell-centered',
+                    ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
+                });
+            }
             createGrid(eGui, {
                 rowData: value,
-                columnDefs: Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
-                    ? resolvedConfig?.columnDefs
-                    : [],
+                columnDefs: columnDefs,
                 pagination: resolvedConfig?.pagination,
                 paginationAutoPageSize: resolvedConfig?.pagination,
                 defaultColDef: {
@@ -215,11 +304,23 @@ function updateValue() {
 }
 function updateOptions() {
     try {
+        const columnDefs = Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
+            ? [...resolvedConfig?.columnDefs] // Clone to avoid direct mutation
+            : [];
+        // Add the action column if actions are defined
+        if (actions && actions.length > 0) {
+            columnDefs.push({
+                headerName: 'Actions',
+                cellRenderer: actionRenderer,
+                autoHeight: true,
+                cellStyle: { textAlign: 'center' },
+                cellClass: 'grid-cell-centered',
+                ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
+            });
+        }
         api?.updateGridOptions({
             rowData: value,
-            columnDefs: Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
-                ? resolvedConfig?.columnDefs
-                : undefined,
+            columnDefs: columnDefs,
             pagination: resolvedConfig?.pagination,
             paginationAutoPageSize: resolvedConfig?.pagination,
             defaultColDef: {

package/package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
 import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import { type TableAction } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 declare const __propDef: {
@@ -11,6 +12,7 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined;
+        actions?: TableAction[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;