Merge branch 'main' into darkmode_new

frontend/src/lib/assets/app.css

@@ -117,3 +117,16 @@
 		}
 	}
 }
+
+.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;
+}

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -1,23 +1,33 @@
 <script lang="ts">
 	import { GridApi, createGrid } from 'ag-grid-community'
 	import { isObject, sendUserToast } from '$lib/utils'
-	import { getContext } from 'svelte'
+	import { SvelteComponent, getContext, onDestroy } from 'svelte'
 	import type { AppInput } from '../../../inputType'
-	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../../types'
+	import type {
+		AppViewerContext,
+		ComponentCustomCSS,
+		ListContext,
+		ListInputs,
+		RichConfigurations
+	} from '../../../types'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
 
 	import { initConfig, initOutput } from '$lib/components/apps/editor/appUtils'
-	import { components } from '$lib/components/apps/editor/component'
+	import { components, type TableAction } from '$lib/components/apps/editor/component'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import ResolveConfig from '../../helpers/ResolveConfig.svelte'
 	import { deepEqual } from 'fast-equals'
 
 	import 'ag-grid-community/styles/ag-grid.css'
 	import 'ag-grid-community/styles/ag-theme-alpine.css'
+
 	import { Loader2 } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initCss } from '$lib/components/apps/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: string
@@ -26,9 +36,14 @@
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
 	export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined
+	export let actions: TableAction[] = []
 
-	const { app, worldStore, selectedComponent, componentControl, darkMode } =
-		getContext<AppViewerContext>('AppViewerContext')
+	const context = getContext<AppViewerContext>('AppViewerContext')
+
+	const iterContext = getContext<ListContext>('ListWrapperContext')
+	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
+
+	const { app, worldStore, selectedComponent, componentControl, darkMode } = context
 
 	const rowHeights = {
 		normal: 40,
@@ -78,6 +93,7 @@
 		page: 0,
 		newChange: { row: 0, column: '', value: undefined },
 		ready: undefined as boolean | undefined,
+		inputs: {},
 		filters: {},
 		displayedRowCount: 0
 	})
@@ -93,12 +109,21 @@
 				selectedRowIndex = rowIndex
 				outputs?.selectedRowIndex.set(rowIndex)
 			}
+
 			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: any[]) {
 		if (rows.length === 0) {
 			outputs?.selectedRows.set([])
@@ -136,25 +161,122 @@
 	}
 
 	let extraConfig = resolvedConfig.extraConfig
-
 	let api: GridApi<any> | undefined = undefined
-
 	let eGui: HTMLDivElement
+	let state: any = undefined
 
 	$: loaded && eGui && mountGrid()
 
-	let state: any = undefined
+	const cachedDivs = new Map<
+		number,
+		{
+			div: HTMLDivElement
+			svelteComponent: SvelteComponent
+			actions: TableAction[]
+		}
+	>()
+
+	function refreshActions(actions: TableAction[]) {
+		if (!deepEqual(actions, lastActions)) {
+			lastActions = [...actions]
+
+			cachedDivs.forEach((cachedDiv) => {
+				cachedDiv.svelteComponent.$destroy()
+				cachedDiv.div.remove()
+			})
+
+			cachedDivs.clear()
+
+			updateOptions()
+		}
+	}
+
+	let lastActions: TableAction[] | undefined = undefined
+	$: actions && refreshActions(actions)
+
+	let inputs = {}
+
+	function actionRenderer(params) {
+		const { rowIndex, data: row } = params
+		if (rowIndex === -1) {
+			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.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: {
@@ -219,7 +341,6 @@
 	}
 
 	$: resolvedConfig && updateOptions()
-
 	$: value && updateValue()
 
 	$: if (!deepEqual(extraConfig, resolvedConfig.extraConfig)) {
@@ -258,12 +379,26 @@
 
 	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.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: {

frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+	import { createEventDispatcher, getContext } from 'svelte'
+	import type { AppViewerContext } from '../../../types'
+	import type { TableAction } from '$lib/components/apps/editor/component'
+
+	import 'ag-grid-community/styles/ag-grid.css'
+	import 'ag-grid-community/styles/ag-theme-alpine.css'
+
+	import AppButton from '../../buttons/AppButton.svelte'
+	import { AppCheckbox, AppSelect } from '../..'
+	import { twMerge } from 'tailwind-merge'
+	import { Popup } from '$lib/components/common'
+	import { Plug2 } from 'lucide-svelte'
+	import ComponentOutputViewer from '$lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte'
+	import { connectOutput } from '$lib/components/apps/editor/appUtils'
+	import RowWrapper from '../../layout/RowWrapper.svelte'
+
+	export let id: string
+	export let render: boolean
+	export let actions: TableAction[] = []
+	export let rowIndex: number
+	export let row: { original: Record<string, any> }
+	export let onSet: (id: string, value: any) => void
+	export let onRemove: (id: string) => void
+	export let wrapActions: boolean | undefined = undefined
+
+	const dispatch = createEventDispatcher()
+	const { selectedComponent, hoverStore, mode, connectingInput } =
+		getContext<AppViewerContext>('AppViewerContext')
+</script>
+
+<RowWrapper value={row} index={rowIndex} {onSet} {onRemove}>
+	<div
+		class={twMerge(
+			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1',
+			!wrapActions ? 'flex-wrap' : ''
+		)}
+	>
+		{#each actions as action, actionIndex}
+			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+			<!-- svelte-ignore missing-declaration -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				on:mouseover|stopPropagation={() => {
+					if (action.id !== $hoverStore) {
+						$hoverStore = action.id
+					}
+				}}
+				on:mouseout|stopPropagation={() => {
+					if ($hoverStore !== undefined) {
+						$hoverStore = undefined
+					}
+				}}
+				on:pointerdown|stopPropagation={() => {
+					if ($selectedComponent?.includes(action.id)) {
+						$selectedComponent = []
+					} else {
+						$selectedComponent = [action.id]
+					}
+				}}
+				class={twMerge(
+					($selectedComponent?.includes(action.id) || $hoverStore === action.id) &&
+						$mode !== 'preview'
+						? 'outline outline-indigo-500 outline-1 outline-offset-1 relative z-50'
+						: 'relative'
+				)}
+			>
+				{#if $mode !== 'preview'}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div
+						title={`Id: ${action.id}`}
+						class={twMerge(
+							'px-2 text-2xs font-bold absolute shadow  -top-2 -left-4 border z-50 rounded-sm w-8 !h-5 flex justify-center items-center',
+							'bg-indigo-500/90 border-indigo-600 text-white',
+							$selectedComponent?.includes(action.id) || $hoverStore === action.id
+								? 'opacity-100'
+								: 'opacity-0'
+						)}
+						on:click|stopPropagation={() => {
+							$selectedComponent = [action.id]
+						}}
+					>
+						{action.id}
+					</div>
+
+					{#if $connectingInput.opened}
+						<div class="absolute z-50 left-8 -top-[10px]">
+							<Popup
+								floatingConfig={{
+									strategy: 'absolute',
+									placement: 'bottom-start'
+								}}
+							>
+								<svelte:fragment slot="button">
+									<button
+										class="bg-red-500/70 border border-red-600 px-1 py-0.5"
+										title="Outputs"
+										aria-label="Open output"><Plug2 size={12} /></button
+									>
+								</svelte:fragment>
+								<ComponentOutputViewer
+									suffix="table"
+									on:select={({ detail }) =>
+										connectOutput(connectingInput, 'buttoncomponent', action.id, detail)}
+									componentId={action.id}
+								/>
+							</Popup>
+						</div>
+					{/if}
+				{/if}
+				{#if rowIndex === 0}
+					{@const controls = {
+						left: () => {
+							if (actionIndex === 0) {
+								$selectedComponent = [id]
+								return true
+							} else if (actionIndex > 0) {
+								$selectedComponent = [actions[actionIndex - 1].id]
+								return true
+							}
+							return false
+						},
+						right: () => {
+							if (actionIndex === actions.length - 1) {
+								return id
+							} else if (actionIndex < actions.length - 1) {
+								$selectedComponent = [actions[actionIndex + 1].id]
+								return true
+							}
+							return false
+						}
+					}}
+					{#if action.type == 'buttoncomponent'}
+						<AppButton
+							noInitialize
+							extraKey={'idx' + rowIndex}
+							{render}
+							noWFull
+							preclickAction={async () => {
+								dispatch('toggleRow')
+							}}
+							id={action.id}
+							customCss={action.customCss}
+							configuration={action.configuration}
+							recomputeIds={action.recomputeIds}
+							extraQueryParams={{
+								row
+							}}
+							componentInput={action.componentInput}
+							verticalAlignment="center"
+							{controls}
+						/>
+					{:else if action.type == 'checkboxcomponent'}
+						<AppCheckbox
+							noInitialize
+							extraKey={'idx' + rowIndex}
+							{render}
+							id={action.id}
+							customCss={action.customCss}
+							configuration={action.configuration}
+							recomputeIds={action.recomputeIds}
+							onToggle={action.onToggle}
+							preclickAction={async () => {
+								dispatch('toggleRow')
+							}}
+							verticalAlignment="center"
+							{controls}
+						/>
+					{:else if action.type == 'selectcomponent'}
+						<div class="w-40">
+							<AppSelect
+								noDefault
+								noInitialize
+								extraKey={'idx' + rowIndex}
+								{render}
+								--font-size="10px"
+								id={action.id}
+								customCss={action.customCss}
+								configuration={action.configuration}
+								recomputeIds={action.recomputeIds}
+								onSelect={action.onSelect}
+								preclickAction={async () => {
+									dispatch('toggleRow')
+								}}
+								{controls}
+							/>
+						</div>
+					{/if}
+				{:else if action.type == 'buttoncomponent'}
+					<AppButton
+						noInitialize
+						extraKey={'idx' + rowIndex}
+						{render}
+						preclickAction={async () => {
+							dispatch('toggleRow')
+						}}
+						noWFull
+						id={action.id}
+						customCss={action.customCss}
+						configuration={action.configuration}
+						recomputeIds={action.recomputeIds}
+						extraQueryParams={{
+							row
+						}}
+						componentInput={action.componentInput}
+					/>
+				{:else if action.type == 'checkboxcomponent'}
+					<AppCheckbox
+						noInitialize
+						extraKey={'idx' + rowIndex}
+						{render}
+						id={action.id}
+						customCss={action.customCss}
+						configuration={action.configuration}
+						recomputeIds={action.recomputeIds}
+						onToggle={action.onToggle}
+						preclickAction={async () => {
+							dispatch('toggleRow')
+						}}
+					/>
+				{:else if action.type == 'selectcomponent'}
+					<div class="w-40">
+						<AppSelect
+							noDefault
+							noInitialize
+							extraKey={'idx' + rowIndex}
+							{render}
+							--font-size="10px"
+							id={action.id}
+							customCss={action.customCss}
+							configuration={action.configuration}
+							recomputeIds={action.recomputeIds}
+							onSelect={action.onSelect}
+							preclickAction={async () => {
+								dispatch('toggleRow')
+							}}
+						/>
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</RowWrapper>

frontend/src/lib/components/apps/components/display/table/AppAggridTableEe.svelte

@@ -9,6 +9,7 @@
 	import 'ag-grid-community/styles/ag-grid.css'
 	import 'ag-grid-community/styles/ag-theme-alpine.css'
 	import { Loader2 } from 'lucide-svelte'
+	import type { TableAction } from '$lib/components/apps/editor/component'
 
 	export let id: string
 	export let license: string
@@ -17,6 +18,7 @@
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
 	export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined
+	export let actions: TableAction[] = []
 
 	let loaded = false
 	async function load() {
@@ -31,7 +33,15 @@
 </script>
 
 {#if loaded}
-	<AppAggridTable {id} {componentInput} {configuration} {initializing} {render} {customCss} />
+	<AppAggridTable
+		{id}
+		{componentInput}
+		{configuration}
+		{initializing}
+		{render}
+		{customCss}
+		{actions}
+	/>
 {:else}
 	<Loader2 class="animate-spin" />
 {/if}

frontend/src/lib/components/apps/components/display/table/AppTable.svelte

@@ -651,7 +651,6 @@
 																<AppSelect
 																	noDefault
 																	noInitialize
-																	--font-size="10px"
 																	extraKey={'idx' + rowIndex}
 																	{render}
 																	id={actionButton.id}

frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte

@@ -135,6 +135,7 @@
 		textStyle={css?.text?.style ?? ''}
 		on:change={(e) => {
 			preclickAction?.()
+
 			value = e.detail
 			if (recomputeIds) {
 				recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -184,6 +184,9 @@
 					if (c.type === 'tablecomponent') {
 						r.push(...c.actionButtons.map((x) => ({ input: x.componentInput, id: x.id })))
 					}
+					if (c.type === 'aggridcomponent' || c.type === 'aggridcomponentee') {
+						r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })))
+					}
 					if (c.type === 'menucomponent') {
 						r.push(...c.menuItems.map((x) => ({ input: x.componentInput, id: x.id })))
 					}

frontend/src/lib/components/apps/editor/AppInputs.svelte

@@ -29,6 +29,15 @@
 					{/each}
 				</div>
 			</div>
+		{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee'}
+			<div>
+				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
+				<div class="ml-4 mt-4">
+					{#each gridItem.data.actions as actionButton (actionButton.id)}
+						<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
+					{/each}
+				</div>
+			</div>
 		{:else}
 			<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
 		{/if}

frontend/src/lib/components/apps/editor/SettingsPanel.svelte

@@ -33,6 +33,13 @@
 							return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id }
 						}
 					}
+				} else if (x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') {
+					if (x?.data?.actions) {
+						const tableAction = x.data.actions.find((x) => x.id === id)
+						if (tableAction) {
+							return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id }
+						}
+					}
 				}
 			})
 			.find((x) => x)
@@ -81,6 +88,12 @@
 							(x) => x.id !== tableActionSettings?.item.id
 						)
 					}
+
+					if (parent.data.type === 'aggridcomponent' || parent.data.type === 'aggridcomponentee') {
+						parent.data.actions = parent.data.actions.filter(
+							(x) => x.id !== tableActionSettings?.item.id
+						)
+					}
 				}
 			}}
 		/>

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -72,6 +72,11 @@ export function dfs(
 			return [item.id, id]
 		} else if (item.data.type == 'menucomponent' && item.data.menuItems.find((x) => id == x.id)) {
 			return [item.id, id]
+		} else if (
+			(item.data.type == 'aggridcomponent' || item.data.type == 'aggridcomponentee') &&
+			item.data.actions.find((x) => id == x.id)
+		) {
+			return [item.id, id]
 		} else {
 			for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) {
 				const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids)
@@ -165,6 +170,9 @@ export function allsubIds(app: App, parentId: string): string[] {
 			if (item.data.type === 'tablecomponent') {
 				subIds.push(...item.data.actionButtons?.map((x) => x.id))
 			}
+			if (item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee') {
+				subIds.push(...item.data.actions?.map((x) => x.id))
+			}
 			if (item.data.type === 'menucomponent') {
 				subIds.push(...item.data.menuItems?.map((x) => x.id))
 			}
@@ -182,6 +190,8 @@ export function getNextGridItemId(app: App): string {
 	const allIds = allItems(app.grid, app.subgrids).flatMap((x) => {
 		if (x.data.type === 'tablecomponent') {
 			return [x.id, ...x.data.actionButtons.map((x) => x.id)]
+		} else if (x.data.type === 'aggridcomponent' || x.data.type === 'aggridcomponentee') {
+			return [x.id, ...x.data.actions.map((x) => x.id)]
 		} else if (x.data.type === 'menucomponent') {
 			return [x.id, ...x.data.menuItems.map((x) => x.id)]
 		} else {
@@ -329,6 +339,7 @@ export function appComponentFromType<T extends keyof typeof components>(
 			customCss: ccomponents[type].customCss as any,
 			recomputeIds: init.recomputeIds ? [] : undefined,
 			actionButtons: init.actionButtons ? [] : undefined,
+			actions: [],
 			menuItems: init.menuItems ? [] : undefined,
 			numberOfSubgrids: init.numberOfSubgrids,
 			horizontalAlignment: init.horizontalAlignment,
@@ -419,6 +430,16 @@ export function copyComponent(
 							id: x.id.replace(`${item.id}_`, `${id}_`)
 						})) ?? []
 				}
+			} else if (item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee') {
+				return {
+					...item.data,
+					id,
+					actionButtons:
+						item.data.actions.map((x) => ({
+							...x,
+							id: x.id.replace(`${item.id}_`, `${id}_`)
+						})) ?? []
+				}
 			} else if (item.data.type === 'menucomponent') {
 				return {
 					...item.data,
@@ -462,6 +483,10 @@ export function getAllSubgridsAndComponentIds(
 		components.push(...component.actionButtons?.map((x) => x.id))
 	}
 
+	if (component.type === 'aggridcomponent' || component.type === 'aggridcomponentee') {
+		components.push(...component.actions?.map((x) => x.id))
+	}
+
 	if (component.type === 'menucomponent') {
 		components.push(...component.menuItems?.map((x) => x.id))
 	}
@@ -489,6 +514,8 @@ export function getAllGridItems(app: App): GridItem[] {
 		.map((x) => {
 			if (x?.data?.type === 'tablecomponent') {
 				return [x, ...x?.data?.actionButtons?.map((x) => ({ data: x, id: x.id }))]
+			} else if (x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') {
+				return [x, ...x?.data?.actions?.map((x) => ({ data: x, id: x.id }))]
 			} else if (x?.data?.type === 'menucomponent') {
 				return [x, ...x?.data?.menuItems?.map((x) => ({ data: x, id: x.id }))]
 			}

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -351,6 +351,7 @@
 				bind:initializing
 				componentInput={component.componentInput}
 				customCss={component.customCss}
+				actions={component.actions}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponentee'}
@@ -361,6 +362,7 @@
 				bind:initializing
 				componentInput={component.componentInput}
 				customCss={component.customCss}
+				actions={component.actions}
 				{render}
 			/>
 		{:else if component.type === 'textcomponent'}

frontend/src/lib/components/apps/editor/component/ComponentCallbacks.svelte

@@ -62,6 +62,11 @@
 
 				if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
 					$selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id]
+				} else if (
+					(left.data.type === 'aggridcomponent' || left.data.type === 'aggridcomponentee') &&
+					left.data.actions.length >= 1
+				) {
+					$selectedComponent = [left.data.actions[left.data.actions.length - 1].id]
 				} else {
 					$selectedComponent = [left.id]
 				}

frontend/src/lib/components/apps/editor/component/components.ts

@@ -137,12 +137,19 @@ export type AgChartsComponentEe = BaseComponent<'agchartscomponentee'> & {
 
 export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>
 
+export type TableAction = BaseAppComponent &
+	(ButtonComponent | CheckboxComponent | SelectComponent) &
+	GridItem
+
 export type TableComponent = BaseComponent<'tablecomponent'> & {
-	actionButtons: (BaseAppComponent & ButtonComponent & GridItem)[]
+	actionButtons: TableAction[]
+}
+export type AggridComponent = BaseComponent<'aggridcomponent'> & {
+	actions: TableAction[]
 }
-export type AggridComponent = BaseComponent<'aggridcomponent'>
 export type AggridComponentEe = BaseComponent<'aggridcomponentee'> & {
 	license: string
+	actions: TableAction[]
 }
 export type DisplayComponent = BaseComponent<'displaycomponent'>
 export type LogComponent = BaseComponent<'logcomponent'>
@@ -348,6 +355,7 @@ export interface InitialAppComponent extends Partial<Aligned> {
 	numberOfSubgrids?: number
 	recomputeIds?: boolean
 	actionButtons?: boolean
+	actions?: boolean
 	menuItems?: boolean
 	tabs?: string[]
 	panes?: number[]
@@ -674,6 +682,13 @@ const aggridcomponentconst = {
 				value: 'normal',
 				selectOptions: ['normal', 'compact', 'comfortable'],
 				tooltip: 'Change the row height'
+			},
+			wrapActions: {
+				type: 'static',
+				fieldType: 'boolean',
+				value: false,
+				tooltip:
+					'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
 			}
 		},
 		componentInput: {

frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -90,6 +90,14 @@
 			}
 		}
 
+		if (item?.data.type == 'aggridcomponent' || item?.data.type == 'aggridcomponentee') {
+			for (let c of item.data.actions) {
+				let old = c.id
+				c.id = c.id.replace(id + '_', newId + '_')
+				propagateRename(old, c.id)
+			}
+		}
+
 		if (item?.data.type === 'menucomponent') {
 			for (let c of item.data.menuItems) {
 				let old = c.id
@@ -111,6 +119,12 @@
 			}
 		}
 
+		if (data.type == 'aggridcomponent' || data.type == 'aggridcomponentee') {
+			for (let c of data.actions) {
+				renameComponent(from, to, c)
+			}
+		}
+
 		if (data.type === 'menucomponent') {
 			for (let c of data.menuItems) {
 				renameComponent(from, to, c)

frontend/src/lib/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -13,4 +13,11 @@
 			{/each}
 		</div>
 	{/if}
+	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') && gridItem.data.actions.length > 0}
+		<div class="ml-2 border-l">
+			{#each gridItem.data.actions as action, index}
+				<Output id={action.id} first={index === 0} label="Table action" />
+			{/each}
+		</div>
+	{/if}
 </div>

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte

@@ -34,6 +34,20 @@
 	{/each}
 {/if}
 
+{#if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee'}
+	{#each gridItem.data.actions as actionButton, index (index)}
+		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
+			<InlineScriptEditorPanel
+				on:createScriptFromInlineScript
+				componentType={actionButton.type}
+				id={actionButton.id}
+				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
+				bind:componentInput={actionButton.componentInput}
+			/>
+		{/if}
+	{/each}
+{/if}
+
 {#if gridItem?.data?.type === 'menucomponent'}
 	{#each gridItem.data.menuItems as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/utils.ts

@@ -66,6 +66,20 @@ function processGridItemRunnable(gridItem: GridItem, list: AppScriptsList): AppS
 			})
 		}
 
+		if (component.type === 'aggridcomponent' || component.type === 'aggridcomponentee') {
+			component.actions.forEach((actionButton) => {
+				if (actionButton.componentInput?.type !== 'runnable') {
+					return
+				}
+				processRunnable(
+					actionButton.componentInput.runnable,
+					actionButton.componentInput.transformer,
+					actionButton.id,
+					list
+				)
+			})
+		}
+
 		if (component.type === 'menucomponent') {
 			component.menuItems?.forEach((menuItem) => {
 				if (menuItem.componentInput?.type !== 'runnable') {

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -335,6 +335,7 @@
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponentee'}
 			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'agchartscomponentee'}
 			<GridAgChartsLicenseKe bind:license={componentSettings.item.data.license} />
 		{:else if componentSettings.item.data.type === 'steppercomponent'}
@@ -364,6 +365,8 @@
 				bind:panes={componentSettings.item.data.panes}
 				bind:component={componentSettings.item.data}
 			/>
+		{:else if componentSettings.item.data.type === 'aggridcomponent' && Array.isArray(componentSettings.item.data.actions)}
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
 		{:else if componentSettings.item.data.type === 'menucomponent' && Array.isArray(componentSettings.item.data.menuItems)}

frontend/src/lib/components/apps/utils.ts

@@ -291,6 +291,16 @@ export function getAllScriptNames(app: App): string[] {
 			})
 		}
 
+		if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') {
+			gridItem.data.actions.forEach((actionButton) => {
+				if (actionButton.componentInput?.type === 'runnable') {
+					if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+						acc.push(actionButton.componentInput.runnable.name)
+					}
+				}
+			})
+		}
+
 		if (gridItem.data.type === 'menucomponent') {
 			gridItem.data.menuItems.forEach((menuItem) => {
 				if (menuItem.componentInput?.type === 'runnable') {

frontend/src/lib/components/common/fileInput/FileInput.svelte

@@ -77,6 +77,22 @@
 		})
 	}
 
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault()
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = 'copy'
+		}
+	}
+
+	function handleDrop(event: DragEvent) {
+		event.preventDefault()
+		if (event.dataTransfer) {
+			if (event.dataTransfer.files && event.dataTransfer.files.length) {
+				onChange(event.dataTransfer.files)
+			}
+		}
+	}
+
 	function removeFile(index: number) {
 		if (!files) return
 		files.splice(index, 1)
@@ -114,6 +130,8 @@
 		duration-200 rounded-lg p-1`,
 		c
 	)}
+	on:dragover={handleDragOver}
+	on:drop={handleDrop}
 	{style}
 >
 	{#if !hideIcon && !files}

frontend/src/lib/components/common/fileUpload/FileUpload.svelte

@@ -44,7 +44,8 @@
 		}
 	}
 
-	let xhr: XMLHttpRequest | undefined = undefined
+	let activeUploads: { xhr: XMLHttpRequest; fileName: string }[] = []
+
 	async function uploadFileToS3(fileToUpload: File, fileToUploadKey: string) {
 		if (fileToUpload === undefined || fileToUploadKey === undefined) {
 			return
@@ -72,6 +73,7 @@
 			path: path,
 			file: fileToUpload
 		}
+
 		$fileUploads = [...$fileUploads, uploadData]
 
 		// // Use a custom TransformStream to track upload progress
@@ -119,7 +121,9 @@
 			// 	}
 			// )
 
-			xhr = new XMLHttpRequest()
+			let xhr = new XMLHttpRequest()
+			activeUploads.push({ xhr, fileName: fileToUpload.name })
+
 			const response = (await new Promise((resolve, reject) => {
 				xhr?.upload.addEventListener('progress', (event) => {
 					if (event.lengthComputable) {
@@ -144,7 +148,8 @@
 							reject(response)
 						}
 					}
-					xhr = undefined
+
+					activeUploads = activeUploads.filter((x) => x.fileName !== fileToUpload.name)
 				})
 				xhr?.open(
 					'POST',
@@ -190,11 +195,21 @@
 		sendUserToast('File deleted!')
 	}
 
-	onDestroy(() => {
-		if (xhr) {
-			xhr?.abort
-			xhr = undefined
+	function clearRequests() {
+		activeUploads.forEach(({ xhr }) => xhr.abort())
+		activeUploads = []
+	}
+
+	function abortUpload(fileName: string) {
+		const upload = activeUploads.find((x) => x.fileName === fileName)
+		if (upload) {
+			upload.xhr.abort()
+			activeUploads = activeUploads.filter((x) => x.fileName !== fileName)
 		}
+	}
+
+	onDestroy(() => {
+		clearRequests()
 	})
 </script>
 
@@ -232,10 +247,7 @@
 												return
 											}
 
-											if (xhr) {
-												xhr.abort()
-												xhr = undefined
-											}
+											abortUpload(fileUpload.name)
 
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
@@ -260,10 +272,7 @@
 												return
 											}
 
-											if (xhr) {
-												xhr.abort()
-												xhr = undefined
-											}
+											clearRequests()
 
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
@@ -306,10 +315,7 @@
 											if (fileUpload.path) {
 												deleteFile(fileUpload.path)
 											}
-											if (xhr) {
-												xhr.abort()
-												xhr = undefined
-											}
+											abortUpload(fileUpload.name)
 										}}
 										startIcon={{
 											icon: Trash

frontend/src/routes/kitchen_sink/+page.svelte

@@ -25,6 +25,8 @@
 			<div class="font-bold text-md">Contained buttons</div>
 			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
 				<Button>Lorem</Button>
+				<Button disabled>Lorem</Button>
+
 				<Button color="dark" loading>Lorem</Button>
 				<Button
 					color="gray"