feat: expose settable col id for app aggrid tables

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -30,7 +30,6 @@
 	import FlowGraphViewerStep from './FlowGraphViewerStep.svelte'
 	import FlowGraphV2 from './graph/FlowGraphV2.svelte'
 	import { buildPrefix } from './graph/graphBuilder'
-	import { root } from 'postcss'
 
 	const dispatch = createEventDispatcher()
 

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

@@ -353,9 +353,10 @@
 						onSelectionChanged(e.api)
 						resolvedConfig?.extraConfig?.['onSelectionChanged']?.(e)
 					},
-					getRowId: (data) => {
-						return (data as any).data['__index']
-					}
+					getRowId: (data) =>
+						resolvedConfig?.rowIdCol && resolvedConfig?.rowIdCol != ''
+							? data.data?.[resolvedConfig?.rowIdCol]
+							: data.data?.['id'] ?? (data as any).data['__index']
 				},
 				{}
 			)

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

@@ -70,17 +70,29 @@
 
 	let result: any[] | undefined = undefined
 
+	$: resolvedConfig?.rowIdCol && resetValues()
 	$: result && setValues()
 
+	function resetValues() {
+		api?.setGridOption('rowData', value)
+	}
+
+	let uid = Math.random().toString(36).substring(7)
+	let prevUid: string | undefined = undefined
+
 	let value: any[] = Array.isArray(result)
-		? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() }))
+		? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() + '-' + uid }))
 		: [{ error: 'input was not an array' }]
 
 	let loaded = false
+
 	async function setValues() {
 		value = Array.isArray(result)
-			? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() }))
+			? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() + '-' + uid }))
 			: [{ error: 'input was not an array' }]
+		prevUid = uid
+		uid = Math.random().toString(36).substring(7)
+
 		if (api && loaded) {
 			let selected = api.getSelectedNodes()
 			if (selected && selected.length > 0 && resolvedConfig?.selectFirstRowByDefault != false) {
@@ -164,13 +176,16 @@
 			try {
 				dataCell = JSON.parse(dataCell)
 			} catch (e) {}
+			let idx = Number(event.node.data['__index'].split('-')[0])
+			uid = prevUid ?? ''
 			outputs?.newChange?.set({
 				row: event.node.rowIndex,
 				column: event.colDef.field,
 				value: dataCell,
-				old: result[Number(event.node.data['__index'])][event.colDef.field]
+				old: result[idx][event.colDef.field]
 			})
-			result[Number(event.node.data['__index'])][event.colDef.field] = dataCell
+			result[idx][event.colDef.field] = dataCell
+
 			let data = { ...result[event.node.rowIndex] }
 			outputs?.selectedRow?.set(data)
 		}
@@ -279,6 +294,11 @@
 		}
 	})
 
+	function getIdFromData(data: any): string {
+		return resolvedConfig?.rowIdCol && resolvedConfig?.rowIdCol != ''
+			? data?.[resolvedConfig?.rowIdCol] ?? data['__index']
+			: data['__index']
+	}
 	function mountGrid() {
 		if (eGui) {
 			try {
@@ -345,12 +365,12 @@
 							outputs?.ready.set(true)
 							value = value
 							if (
-								result &&
-								result.length > 0 &&
+								value &&
+								value.length > 0 &&
 								resolvedConfig?.selectFirstRowByDefault === true &&
 								selectedRowIndex === -1
 							) {
-								e.api.getRowNode('0')?.setSelected(true)
+								e.api.getRowNode(getIdFromData(value))?.setSelected(true)
 							}
 							$componentControl[id] = {
 								agGrid: { api: e.api, columnApi: e.columnApi },
@@ -372,14 +392,14 @@
 							resolvedConfig?.extraConfig?.['onSelectionChanged']?.(e)
 						},
 						onCellEditingStarted: (e) => {
-							e.api.getRowNode(e.data['__index'])?.setSelected(true)
+							e.api.getRowNode(getIdFromData(e.data))?.setSelected(true)
 						},
 						onFilterChanged: (e) => {
 							outputs?.filters?.set(e.api.getFilterModel())
 							outputs?.displayedRowCount?.set(e.api.getDisplayedRowCount())
 							resolvedConfig?.extraConfig?.['onFilterChanged']?.(e)
 						},
-						getRowId: (data) => data.data['__index']
+						getRowId: (data) => getIdFromData(data.data)
 					},
 					{}
 				)
@@ -415,7 +435,7 @@
 	}
 
 	function updateValue() {
-		api?.updateGridOptions({ rowData: value })
+		api?.setGridOption('rowData', value)
 
 		const displayedRowCount = api?.getDisplayedRowCount()
 		if (displayedRowCount) {

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

@@ -217,23 +217,25 @@
 							{controls}
 						/>
 					{:else if action.type == 'selectcomponent'}
-						<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')
-								selectRow(p)
-							}}
-							{controls}
-						/>
+						<div style="height: 30px; margin-top: -3px;">
+							<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')
+									selectRow(p)
+								}}
+								{controls}
+							/>
+						</div>
 					{/if}
 				{:else if action.type == 'buttoncomponent'}
 					<AppButton
@@ -271,22 +273,24 @@
 						}}
 					/>
 				{:else if action.type == 'selectcomponent'}
-					<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')
-							selectRow(p)
-						}}
-					/>
+					<div style="height: 30px; margin-top: -3px;">
+						<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')
+								selectRow(p)
+							}}
+						/>
+					</div>
 				{/if}
 			</div>
 		{/each}

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

@@ -710,6 +710,14 @@ const aggridcomponentconst = {
 					{ field: 'age', flex: 1 }
 				]
 			} as StaticAppInput,
+			rowIdCol: {
+				type: 'static',
+				fieldType: 'text',
+				value: '',
+				placeholder: 'id',
+				tooltip:
+					'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+			},
 			flex: {
 				type: 'static',
 				fieldType: 'boolean',
@@ -818,6 +826,14 @@ const aggridinfinitecomponentconst = {
 				subFieldType: 'ag-grid',
 				value: []
 			} as StaticAppInput,
+			rowIdCol: {
+				type: 'static',
+				fieldType: 'text',
+				value: '',
+				placeholder: 'id',
+				tooltip:
+					'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+			},
 			flex: {
 				type: 'static',
 				fieldType: 'boolean',
@@ -3786,6 +3802,14 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					value: [],
 					loading: false
 				} as StaticAppInput,
+				rowIdCol: {
+					type: 'static',
+					fieldType: 'text',
+					value: '',
+					placeholder: 'id',
+					tooltip:
+						'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+				},
 				whereClause: {
 					type: 'static',
 					fieldType: 'text',