feat: added fitDataStretchGrow layout and widthGrow support for Tabulator

Author: mihalikv

src/django_smartbase_admin/engine/field.py

@@ -37,6 +37,8 @@ class TabulatorFieldOptions(JSONSerializableMixin):
     frozen = False
     title = None
     editorParams = None
+    width = None
+    widthGrow = None
 
     def __init__(
         self,
@@ -46,6 +48,8 @@ def __init__(
         frozen=None,
         title=None,
         editorParams=None,
+        width=None,
+        widthGrow=None,
     ) -> None:
         super().__init__()
         self.headerFilter = headerFilter
@@ -54,6 +58,8 @@ def __init__(
         self.frozen = frozen
         self.title = title
         self.editorParams = editorParams
+        self.width = width
+        self.widthGrow = widthGrow
 
 
 class XLSXFieldOptions(JSONSerializableMixin):

src/django_smartbase_admin/static/sb_admin/src/css/_tabulator.css

@@ -31,7 +31,7 @@
 .tabulator.tabulator--sticky-header-and-footer .tabulator-header {
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: 100;
 }
 
 .tabulator .tabulator-header.tabulator-header-hidden {

src/django_smartbase_admin/static/sb_admin/src/js/table.js

@@ -13,6 +13,7 @@ import { HeaderTabsModule } from "./table_modules/header_tabs_module"
 import { DataTreeModule } from "./table_modules/data_tree_module"
 import { StickyHeaderAndFooterModule } from "./table_modules/sticky_header_and_footer_module"
 import { SBAjaxParamsTabulatorModifier } from "./sb_ajax_params_tabulator_modifier"
+import { registerFitDataStretchGrowLayout } from "./tabulator_layouts/fit_data_stretch_grow"
 
 
 class SBAdminTable {
@@ -252,6 +253,7 @@ class SBAdminTable {
                 return "<a href='" + self.tableDetailUrl.replace(self.constants.OBJECT_ID_PLACEHOLDER, dataId) + "'>" + cellContent + "</a>"
             }
         })
+        registerFitDataStretchGrowLayout(Tabulator, this.tabulatorOptions)
 
         this.defaultRowSelectionFormatter = Tabulator.moduleBindings.format.formatters.rowSelection
         const self = this

src/django_smartbase_admin/static/sb_admin/src/js/tabulator_layouts/fit_data_stretch_grow.js

@@ -0,0 +1,70 @@
+// Custom fitDataStretch variant: stretch the column marked with widthGrow instead of the last column.
+// See https://github.com/olifolkerd/tabulator/issues/2725 and Tabulator's fitDataStretch layout.
+export function registerFitDataStretchGrowLayout(Tabulator, tabulatorOptions) {
+    if(tabulatorOptions.layout !== "fitDataStretchGrow") {
+        return
+    }
+
+    Tabulator.extendModule("layout", "modes", {
+        fitDataStretchGrow: fitDataStretchGrow
+    })
+
+    if(Tabulator.moduleBindings.layout?.modes) {
+        Tabulator.moduleBindings.layout.modes.fitDataStretchGrow = fitDataStretchGrow
+    }
+}
+
+
+function fitDataStretchGrow(columns) {
+    let colsWidth = 0,
+        tableWidth = this.table.rowManager.element.clientWidth,
+        gap = 0,
+        lastCol = false,
+        stretchCol = false
+
+    columns.forEach((column) => {
+        if(column.modules.fitDataStretchGrowWidth) {
+            column.widthFixed = false
+            column.modules.fitDataStretchGrowWidth = false
+        }
+
+        if(column.widthFixed && typeof column.definition.width === "undefined") {
+            column.widthFixed = false
+        }
+
+        if(!column.widthFixed) {
+            column.reinitializeWidth()
+        }
+
+        if(this.table.options.responsiveLayout ? column.modules.responsive.visible : column.visible) {
+            lastCol = column
+            if(column.definition.widthGrow) {
+                stretchCol = column
+            }
+        }
+
+        if(column.visible) {
+            colsWidth += column.getWidth()
+        }
+    })
+
+    const targetCol = stretchCol || lastCol
+
+    if(targetCol) {
+        gap = tableWidth - colsWidth + targetCol.getWidth()
+
+        if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)) {
+            targetCol.setWidth(0)
+            this.table.modules.responsiveLayout.update()
+        }
+
+        if(gap > 0) {
+            targetCol.setWidth(gap)
+            targetCol.modules.fitDataStretchGrowWidth = true
+        } else {
+            targetCol.reinitializeWidth()
+        }
+    } else if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)) {
+        this.table.modules.responsiveLayout.update()
+    }
+}