diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte index d4f18039ac..bf35c8a295 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte @@ -30,6 +30,12 @@ const { app, worldStore, selectedComponent, componentControl, darkMode } = getContext('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) { diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 040594317a..f0baa3429e 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/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: {