Register sub components in aggrid modal (#8087)

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

@@ -3,6 +3,7 @@
 	import { getContext } from 'svelte'
 	import { connectInput } from '../../appUtils'
 	import ComponentOutputViewer from '../ComponentOutputViewer.svelte'
+	import SubGridOutput from '../SubGridOutput.svelte'
 	import OutputHeader from './OutputHeader.svelte'
 
 	const { connectingInput } = getContext<AppViewerContext>('AppViewerContext')
@@ -12,9 +13,12 @@
 		first?: boolean
 		label: string
 		renderRec: boolean
+		numberOfSubgrids?: number
 	}
 
-	let { id, first = false, label, renderRec }: Props = $props()
+	let { id, first = false, label, renderRec, numberOfSubgrids = 0 }: Props = $props()
+
+	let subGrids = $derived(Array.from({ length: numberOfSubgrids }).map((_, i) => `${id}-${i}`))
 </script>
 
 <OutputHeader render={renderRec} renamable={false} {id} name={label} {first}>
@@ -26,5 +30,8 @@
 				$connectingInput = connectInput($connectingInput, id, detail)
 			}}
 		/>
+		{#if subGrids.length > 0}
+			<SubGridOutput {render} parentId={id} {subGrids} />
+		{/if}
 	{/snippet}
 </OutputHeader>

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

@@ -14,14 +14,26 @@
 	{#if gridItem.data.type === 'tablecomponent' && gridItem.data.actionButtons.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actionButtons as action, index}
-				<Output renderRec={render} id={action.id} first={index === 0} label="Table action" />
+				<Output
+					renderRec={render}
+					id={action.id}
+					first={index === 0}
+					label="Table action"
+					numberOfSubgrids={action.numberOfSubgrids ?? 0}
+				/>
 			{/each}
 		</div>
 	{/if}
 	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent' || gridItem.data.type === 'aggridinfinitecomponent' || gridItem.data.type === 'aggridinfinitecomponentee') && gridItem.data.actions?.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actions as action, index}
-				<Output renderRec={render} id={action.id} first={index === 0} label="Table action" />
+				<Output
+					renderRec={render}
+					id={action.id}
+					first={index === 0}
+					label="Table action"
+					numberOfSubgrids={action.numberOfSubgrids ?? 0}
+				/>
 			{/each}
 		</div>
 	{/if}