diff --git a/package-lock.json b/package-lock.json
index 8737f5f..202f9db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3112,6 +3112,22 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
+ "angular-resize-event": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/angular-resize-event/-/angular-resize-event-2.0.1.tgz",
+ "integrity": "sha512-MSSsPb35nIBqPnLwslA3SC0ojTc4nBIaT4y0Plri+fCDUKCunPf7MpJrF/cTI/9wCpvVvEIcuzHfTrA6kp03mA==",
+ "requires": {
+ "css-element-queries": "^1.2.3",
+ "tslib": "^2.0.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+ "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+ }
+ }
+ },
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -4911,6 +4927,11 @@
"timsort": "^0.3.0"
}
},
+ "css-element-queries": {
+ "version": "1.2.3",
+ "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.2.3.tgz",
+ "integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q=="
+ },
"css-loader": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.2.2.tgz",
diff --git a/package.json b/package.json
index 6218b7f..b66cc1d 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"@ng-stack/contenteditable": "^1.1.0",
"ag-grid-angular": "^22.1.1",
"ag-grid-community": "^22.1.1",
+ "angular-resize-event": "^2.0.1",
"core-js": "^2.5.4",
"dexie": "^3.0.2",
"moment": "^2.24.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fba517f..f534f09 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -18,6 +18,7 @@ import { MarkdownModule } from 'ngx-markdown';
import {ConnectionServiceModule} from 'ng-connection-service';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
+import { AngularResizedEventModule } from 'angular-resize-event';
/**
* This function is used internal to get a string instance of the `` value from `index.html`.
@@ -49,6 +50,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
MarkdownModule.forRoot(),
ConnectionServiceModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+ AngularResizedEventModule,
],
providers: [
StatusBar,
diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
index 1097a85..ec772a1 100644
--- a/src/app/components/components.module.ts
+++ b/src/app/components/components.module.ts
@@ -36,6 +36,7 @@ import {EditorPage} from '../pages/editor/editor.page';
import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
import {WysiwygEditorComponent} from './editor/database/editors/wysiwyg/wysiwyg-editor.component';
import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-modal.component';
+import {AngularResizedEventModule} from 'angular-resize-event';
@NgModule({
declarations: [
@@ -79,6 +80,7 @@ import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-m
DirectivesModule,
MarkdownModule,
EditorPageRoutingModule,
+ AngularResizedEventModule,
],
entryComponents: [
NodePickerComponent,
diff --git a/src/app/components/editor/database/database.component.html b/src/app/components/editor/database/database.component.html
index 8519ac9..c54399c 100644
--- a/src/app/components/editor/database/database.component.html
+++ b/src/app/components/editor/database/database.component.html
@@ -1,4 +1,4 @@
-
+
-
+
Manage Columns
Insert Row
Delete Row
diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts
index bfa7b72..2b338a6 100644
--- a/src/app/components/editor/database/database.component.ts
+++ b/src/app/components/editor/database/database.component.ts
@@ -149,6 +149,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
setColumns(data) {
this.columnDefs = data.map(x => {
x.editable = !this.readonly;
+ x.minWidth = 150;
// Set editors and renderers for different types
if ( x.Type === 'text' ) {
@@ -160,6 +161,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
} else if ( x.Type === 'boolean' ) {
x.cellRendererFramework = BooleanRendererComponent;
x.cellEditorFramework = BooleanEditorComponent;
+ x.suppressSizeToFit = true;
} else if ( x.Type === 'select' ) {
x.cellEditorFramework = SelectEditorComponent;
} else if ( x.Type === 'multiselect' ) {
@@ -172,6 +174,9 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
x.cellRendererFramework = CurrencyRendererComponent;
} else if ( x.Type === 'index' ) {
x.editable = false;
+ x.suppressSizeToFit = true;
+ x.width = 80;
+ x.minWidth = 80;
} else if ( x.Type === 'wysiwyg' ) {
x.cellEditorFramework = WysiwygEditorComponent;
}
@@ -181,10 +186,15 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
this.agGridElement.api.setColumnDefs([]);
this.agGridElement.api.setColumnDefs(this.columnDefs);
+ this.agGridElement.api.sizeColumnsToFit();
this.dirty = true;
this.editorService.triggerSave();
}
+ public onResized() {
+ this.agGridElement.api.sizeColumnsToFit();
+ }
+
public async performLoad(): Promise {
if ( !this.node.Value ) {
this.node.Value = {};