Tabulator Default Layout: fitDataStretchFrozen

public/js/components/filter/Filter.js

@@ -21,6 +21,8 @@ import FilterColumns from './Filter/Columns.js';
 import TableDownload from './Table/Download.js';
 import collapseAutoClose from '../../directives/collapseAutoClose.js';
 
+import moduleLayoutFitDataStretchFrozen from '../../tabulator/layouts/fitDataStretchFrozen.js';
+
 //
 const FILTER_COMPONENT_NEW_FILTER = 'Filter Component New Filter';
 const FILTER_COMPONENT_NEW_FILTER_TYPE = 'Filter Component New Filter Type';
@@ -199,7 +201,7 @@ export const CoreFilterCmpt = {
 			// Define a default tabulator options in case it was not provided
 			let tabulatorOptions = {...{
 				height: 500,
-				layout: "fitDataStretch",
+				layout: "fitDataStretchFrozen",
 				movableColumns: true,
 				columnDefaults:{
 					tooltip: true,

public/js/tabulator/layouts/fitDataStretchFrozen.js

@@ -0,0 +1,50 @@
+/**
+ * This may need changes if Tabulator gets updated!
+ *
+ * Current working Version: 5.5.2
+ * 
+ * This is a copy of the fitDataStretch function. The only difference
+ * is the check for frozen columns on line 22.
+ */
+
+export default window.Tabulator?.extendModule("layout", "modes", {
+	fitDataStretchFrozen(columns, forced) {
+		var colsWidth = 0,
+		tableWidth = this.table.rowManager.element.clientWidth,
+		gap = 0,
+		lastCol = false;
+
+		columns.forEach((column, i) => {
+			if (!column.widthFixed) {
+				column.reinitializeWidth();
+			}
+
+			if (this.table.options.responsiveLayout ? column.modules.responsive.visible : column.visible && !column.definition.frozen) {
+				lastCol = column;
+			}
+
+			if (column.visible) {
+				colsWidth += column.getWidth();
+			}
+		});
+
+		if (lastCol){
+			gap = tableWidth - colsWidth + lastCol.getWidth();
+
+			if (this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)) {
+				lastCol.setWidth(0);
+				this.table.modules.responsiveLayout.update();
+			}
+
+			if (gap > 0) {
+				lastCol.setWidth(gap);
+			} else {
+				lastCol.reinitializeWidth();
+			}
+		} else {
+			if (this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)) {
+				this.table.modules.responsiveLayout.update();
+			}
+		}
+	}
+});