diff --git a/lib/core/LyxeaDatatable.ts b/lib/core/LyxeaDatatable.ts
index 42e3f14..d8f4a2a 100644
--- 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,9 +254,30 @@ 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
@@ -263,15 +285,6 @@ class LyxeaDatatable<T>
     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
index d621f28..9388db3 100644
--- 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(