feat: add extra config to aggrid

frontend/src/lib/components/SimpleEditor.svelte

@@ -60,6 +60,7 @@
 	export let shouldBindKey: boolean = true
 	export let autoHeight = false
 	export let fixedOverflowWidgets = true
+	export let small = false
 
 	const dispatch = createEventDispatcher()
 
@@ -109,7 +110,8 @@
 
 		editor = meditor.create(divEl as HTMLDivElement, {
 			...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
-			overflowWidgetsDomNode: widgets
+			overflowWidgetsDomNode: widgets,
+			fontSize: small ? 12 : 14
 		})
 
 		let timeoutModel: NodeJS.Timeout | undefined = undefined

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

@@ -109,42 +109,45 @@
 					class="ag-theme-alpine"
 				>
 					{#key resolvedConfig?.pagination}
-						<AgGridSvelte
-							bind:rowData={result}
-							columnDefs={resolvedConfig?.columnDefs}
-							pagination={resolvedConfig?.pagination}
-							paginationAutoPageSize={resolvedConfig?.pagination}
-							defaultColDef={{
-								flex: resolvedConfig.flex ? 1 : 0,
-								editable: resolvedConfig?.allEditable,
-								onCellValueChanged
-							}}
-							onPaginationChanged={(event) => {
-								outputs?.page.set(event.api.paginationGetCurrentPage())
-							}}
-							rowSelection={resolvedConfig?.multipleSelectable ? 'multiple' : 'single'}
-							suppressRowDeselection={true}
-							rowMultiSelectWithClick={resolvedConfig?.multipleSelectable
-								? resolvedConfig.rowMultiselectWithClick
-								: undefined}
-							onSelectionChanged={(e) => {
-								if (resolvedConfig?.multipleSelectable) {
-									const rows = e.api.getSelectedNodes()
-									if (rows != undefined) {
-										toggleRows(rows)
+						{#key resolvedConfig?.extraConfig}
+							<AgGridSvelte
+								bind:rowData={result}
+								columnDefs={resolvedConfig?.columnDefs}
+								pagination={resolvedConfig?.pagination}
+								paginationAutoPageSize={resolvedConfig?.pagination}
+								defaultColDef={{
+									flex: resolvedConfig.flex ? 1 : 0,
+									editable: resolvedConfig?.allEditable,
+									onCellValueChanged
+								}}
+								onPaginationChanged={(event) => {
+									outputs?.page.set(event.api.paginationGetCurrentPage())
+								}}
+								rowSelection={resolvedConfig?.multipleSelectable ? 'multiple' : 'single'}
+								suppressRowDeselection={true}
+								rowMultiSelectWithClick={resolvedConfig?.multipleSelectable
+									? resolvedConfig.rowMultiselectWithClick
+									: undefined}
+								onSelectionChanged={(e) => {
+									if (resolvedConfig?.multipleSelectable) {
+										const rows = e.api.getSelectedNodes()
+										if (rows != undefined) {
+											toggleRows(rows)
+										}
+									} else {
+										const row = e.api.getSelectedNodes()?.[0]
+										if (row != undefined) {
+											toggleRow(row)
+										}
 									}
-								} else {
-									const row = e.api.getSelectedNodes()?.[0]
-									if (row != undefined) {
-										toggleRow(row)
-									}
-								}
-							}}
-							onGridReady={(e) => {
-								outputs?.ready.set(true)
-								$componentControl[id] = { agGrid: { api: e.api, columnApi: e.columnApi } }
-							}}
-						/>
+								}}
+								{...resolvedConfig.extraConfig}
+								onGridReady={(e) => {
+									outputs?.ready.set(true)
+									$componentControl[id] = { agGrid: { api: e.api, columnApi: e.columnApi } }
+								}}
+							/>
+						{/key}
 					{/key}
 				</div>
 			</div>

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

@@ -1146,6 +1146,13 @@ Hello \${ctx.username}
 					fieldType: 'boolean',
 					value: false,
 					onlyStatic: true
+				},
+				extraConfig: {
+					type: 'static',
+					fieldType: 'object',
+					value: {},
+					tooltip: 'any configuration that can be passed to ag-grid top level',
+					onlyStatic: true
 				}
 			},
 			componentInput: {

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

@@ -56,7 +56,7 @@
 	<div
 		class={classNames(
 			'flex gap-1',
-			onlyStatic ? 'flex-row items-center justify-between' : 'flex-col'
+			onlyStatic && fieldType != 'object' ? 'flex-row items-center justify-between' : 'flex-col'
 		)}
 	>
 		<div class="flex justify-between items-end">
@@ -123,7 +123,11 @@
 		{:else if componentInput?.type === 'row'}
 			<RowInputEditor bind:componentInput />
 		{:else if componentInput?.type === 'static'}
-			<div class={onlyStatic ? 'w-2/3 flex justify-end' : 'w-full flex flex-row-reverse'}>
+			<div
+				class={onlyStatic && fieldType != 'object'
+					? 'w-2/3 flex justify-end'
+					: 'w-full flex flex-row-reverse'}
+			>
 				<StaticInputEditor
 					{fieldType}
 					{subFieldType}

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte

@@ -4,6 +4,7 @@
 	export let value: any = undefined
 	export let error = ''
 	export let editor: SimpleEditor | undefined = undefined
+	export let small = false
 
 	$: tooBig = code && code?.length > 1000000
 	function parseJson() {
@@ -22,7 +23,15 @@
 {:else}
 	<div class="flex flex-col w-full">
 		<div class="border border-gray-300 w-full">
-			<SimpleEditor on:focus bind:this={editor} on:change autoHeight lang="json" bind:code />
+			<SimpleEditor
+				{small}
+				on:focus
+				bind:this={editor}
+				on:change
+				autoHeight
+				lang="json"
+				bind:code
+			/>
 		</div>
 		{#if error != ''}
 			<span class="text-red-600 text-xs">{error}</span>

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -104,6 +104,7 @@
 		{:else}
 			<div class="flex w-full flex-col">
 				<JsonEditor
+					small
 					bind:value={componentInput.value}
 					code={JSON.stringify(componentInput.value, null, 2)}
 				/>