Merge pull request #5 from geohyd/develop

Fix merge column and use init.dt event
geohyd · May 7, 2024 · eb86f12 · eb86f12
2 parents 6592d6a + 1c0afd7
commit eb86f12
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 26 deletions.
diff --git a/lib/core/LyxeaDatatable.ts b/lib/core/LyxeaDatatable.ts
@@ -20,6 +20,7 @@ import Action, { ActionArgs } from '@plugins/action/Action';
 import DtButtons from './DtButtons';
 import Filters from './Filters';
 import LxRenderer from '@dto/Renderer';
+import { default as jquery } from 'jquery';
 
 //@ts-ignore
 window.JSZip = jszip;
@@ -177,7 +178,7 @@ class LyxeaDatatable<T>
         If columns in the standard object and in lxconfig, header generation is only based on lxconfig.
         This allows you to generate the header with all the columns (and not just the columns defined in lxconfig).
       */
-      if (lxConfig.headers && standardColumns) {
+      if (lxConfig.headers && standardColumns && standardColumns.length) {
         lxConfig.headers?.unshift({ columns: [...standardColumns] });
       }
       new LxRenderer(lxConfig);
@@ -253,25 +254,37 @@ class LyxeaDatatable<T>
 
     this.#dtButtons.parse(this.config.buttons);
 
-    if (lxConfig && lxConfig.scrollYFitToScreen)
-      this.scrollYFitToScreen(this.config);
+    jquery(`${this._ref}`).on('init.dt', (e, settings) => {
+      if (e.namespace !== 'dt') {
+        return;
+      }
+      const dtInstance = settings.oInstance.api();
+      /**
+       * Adding filter inputs
+       */
+      if (lxConfig && lxConfig.filters) {
+        // @ts-ignore
+        this.#headerElement = new Filters(this.config, dtInstance).init(
+          this.#headerElement
+        );
+      }
 
+      /**
+       * Fit scrollY to screen
+       */
+      if (lxConfig && lxConfig.scrollYFitToScreen) {
+        this.scrollYFitToScreen();
+        // Force redraw (FitToScreen has an effect on the draw event)
+        dtInstance.draw();
+      }
+    });
     /**
      * Initializing datatable
      * Init event, get the datable instance on event.detail
      */
     this.instance = new DataTable(`${this._ref}`, this.config);
     this.refElement.dispatchEvent(this.initEvent(this.instance));
 
-    /**
-     * Adding filter inputs
-     */
-    if (lxConfig && lxConfig.filters) {
-      this.#headerElement = new Filters(this.config, this.instance).init(
-        this.#headerElement
-      );
-    }
-
     /**
      * Handle issue with bootstrap tab nav
      */
@@ -283,24 +296,36 @@ class LyxeaDatatable<T>
 
   __filterDataWithKey() {}
 
-  scrollYFitToScreen<T>(config: CustomDatatableConfig<T>) {
+  scrollYFitToScreen() {
     const self = this;
-    // @ts-ignore
-    config.drawCallback = function () {
+    jquery(`${this._ref}`).on('draw.dt', (e, _) => {
+      if (e.namespace !== 'dt') {
+        return;
+      }
       const tabPosition = document.querySelector(
         `${self._ref}_wrapper`
       ) as HTMLElement;
       if (tabPosition) {
         const tabTop = tabPosition.getBoundingClientRect().top;
         const dtScrollHeadHeight = (
-          document.querySelector(
+          (document.querySelector(
             `${self._ref}_wrapper .dt-scroll-head`
-          ) as HTMLElement
+          ) as HTMLElement) || { offsetHeight: 0 }
+        ).offsetHeight;
+        const dtTop = (
+          (document.querySelector(
+            `${self._ref}_wrapper .top`
+          ) as HTMLElement) || { offsetHeight: 0 }
+        ).offsetHeight;
+        const dtBottom = (
+          (document.querySelector(
+            `${self._ref}_wrapper .bottom`
+          ) as HTMLElement) || { offsetHeight: 0 }
         ).offsetHeight;
         const dtScrollFootHeight = (
-          document.querySelector(
+          (document.querySelector(
             `${self._ref}_wrapper .dt-scroll-foot`
-          ) as HTMLElement
+          ) as HTMLElement) || { offsetHeight: 0 }
         ).offsetHeight;
         const dtLayoutRows = document.querySelectorAll(
           `${self._ref}_wrapper .dt-layout-row:not(.dt-layout-table)`
@@ -312,9 +337,11 @@ class LyxeaDatatable<T>
         const myHeight =
           window.innerHeight - // La taille de la fenêtre complete
           tabTop - // L'ordonnée du haut du tableau
-          dtScrollHeadHeight - // La taille du header
-          dtScrollFootHeight - // La taille du footer
-          dtLayoutRowsHeight - // La taille de toutes les rows
+          dtTop - // La taille du top (lorsqu'on utilise `dom`)
+          dtBottom - // La taille du bottom (lorsqu'on utilise `dom`)
+          dtScrollHeadHeight - // La taille du header (lorsqu'on utilise `layout`)
+          dtScrollFootHeight - // La taille du footer (lorsqu'on utilise `layout`)
+          dtLayoutRowsHeight - // La taille de toutes les rows (lorsqu'on utilise `layout`)
           10; // valeur statique pour assurer une marge
         const dtScrollBody = document.querySelector(
           `${self._ref}_wrapper .dt-scroll-body`
@@ -324,7 +351,7 @@ class LyxeaDatatable<T>
           dtScrollBody.style.height = myHeight + 'px';
         }
       }
-    };
+    });
   }
 
   handleBootrapTabChange<T>(instance: DataTable<T>) {

diff --git a/lib/dom/HeadersLxDom.ts b/lib/dom/HeadersLxDom.ts
@@ -55,10 +55,13 @@ class HeaderLxDom extends AbstractLxDom {
     );
 
     if (!Object.keys(groupedHeaders).length) return this.headerRef;
-    // if no groupheader is present, build only columns
+    // if no groupheader is present, build only columns (e.g. : there are only HeaderGroup.NONE groups)
     if (
-      Object.keys(groupedHeaders).length === 1 &&
-      Object.keys(groupedHeaders).some((el) => el.startsWith(HeaderGroup.NONE))
+      /*Object.keys(groupedHeaders).length === 1 ||
+      Object.keys(groupedHeaders).some((el) => el.startsWith(HeaderGroup.NONE))*/
+      !Object.keys(groupedHeaders).some(
+        (el) => !el.startsWith(HeaderGroup.NONE)
+      )
     ) {
       const headerCells = this.$mainRowHeader(groupedHeaders);
       const mainHeaderWrapper = this.$headerWrapper(