From 5fd14949fac69e8cbc08f73cc8e158f3d0aec2be Mon Sep 17 00:00:00 2001
From: cgfhtw <christopher.gerbrich@technikum-wien.at>
Date: Thu, 5 Dec 2024 15:13:58 +0100
Subject: [PATCH] Tabulator Default Layout: fitDataStretchFrozen

---
 public/js/components/filter/Filter.js         |  4 +-
 .../tabulator/layouts/fitDataStretchFrozen.js | 50 +++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 public/js/tabulator/layouts/fitDataStretchFrozen.js

diff --git a/public/js/components/filter/Filter.js b/public/js/components/filter/Filter.js
index 20c79a1cb..98284c9da 100644
--- a/public/js/components/filter/Filter.js
+++ b/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,
diff --git a/public/js/tabulator/layouts/fitDataStretchFrozen.js b/public/js/tabulator/layouts/fitDataStretchFrozen.js
new file mode 100644
index 000000000..1e223de90
--- /dev/null
+++ b/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();
+			}
+		}
+	}
+});