feat(frontend): Ag Grid compactness (#3052)

* feat(frontend): add support for compactness

* feat(frontend): add support for compactness

* feat(frontend): cleanup

* feat(frontend): rowHeight onMount

* feat(frontend): move rowHeights definition

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

@@ -30,6 +30,12 @@
 	const { app, worldStore, selectedComponent, componentControl, darkMode } =
 		getContext<AppViewerContext>('AppViewerContext')
 
+	const rowHeights = {
+		normal: 40,
+		compact: 30,
+		comfortable: 50
+	}
+
 	let css = initCss($app.css?.aggridcomponent, customCss)
 
 	let result: any[] | undefined = undefined
@@ -154,6 +160,9 @@
 							editable: resolvedConfig?.allEditable,
 							onCellValueChanged
 						},
+						rowHeight: resolvedConfig.compactness
+							? rowHeights[resolvedConfig.compactness]
+							: rowHeights['normal'],
 						rowSelection: resolvedConfig?.multipleSelectable ? 'multiple' : 'single',
 						rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
 							? resolvedConfig.rowMultiselectWithClick
@@ -229,6 +238,7 @@
 			onSelectionChanged(api)
 		}
 	}
+
 	function updateOptions() {
 		try {
 			api?.updateGridOptions({
@@ -248,6 +258,9 @@
 				rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
 					? resolvedConfig.rowMultiselectWithClick
 					: undefined,
+				rowHeight: resolvedConfig.compactness
+					? rowHeights[resolvedConfig.compactness]
+					: rowHeights['normal'],
 				...(resolvedConfig?.extraConfig ?? {})
 			})
 		} catch (e) {

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

@@ -639,6 +639,13 @@ const aggridcomponentconst = {
 				fieldType: 'object',
 				value: {},
 				tooltip: 'any configuration that can be passed to ag-grid top level'
+			},
+			compactness: {
+				type: 'static',
+				fieldType: 'select',
+				value: 'normal',
+				selectOptions: ['normal', 'compact', 'comfortable'],
+				tooltip: 'Change the row height'
 			}
 		},
 		componentInput: {