set table head sticky (#18124)

* update table head to sticky

update table head to sticky

* update on small screen

update on small screen

* update table conditions

update table conditions

* remove on smaller screen

remove on smaller screen

* update screen shot

update screen shot

* Update Morpheus_load.png

* update table warnings

update table warnings

* remove firefox warning

remove firefox warning

* test new setup

test new setup

* remove js, sticky on pure css

remove js, sticky on pure css

* update ui screen shot

update ui screen shot

* update scroll on l6

* remove related

remove related

* update z index

update z index so table tool tip won't overlap

* update table css

update table css

* update z-index

update z-index

* update test css

update test css

* add missing semi comma

add missing semi comma

* update datable zindex

update datable zindex

* update tests

update tests

* Update UIIntegrationTest_metric_tooltip.png

update tooltip screen shot

* update report side css

update report side css

* Update _dataTable.less

fix css change

* update table image

update table image

* update wrong table css

update wrong table css

* update screen shots

update screen shots

* update to js solution

update to js solution

* update table

update table

* add on load blinds, remove console.log

add on load blinds, remove console.log

* update screen shot

update screen shot

* Update plugins/CoreHome/stylesheets/dataTable/_dataTable.less

Co-authored-by: sgiehl <stefan@matomo.org>

2 files changed, 39 insertions, 12 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 2115626642..35b73de875 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -111,9 +111,22 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         this.isEmpty = $('.pk-emptyDataTable', domElem).length > 0;
         this.bindEventsAndApplyStyle(domElem);
         this._init(domElem);
+        this.enableStickHead(domElem);
         this.initialized = true;
+
     },
 
+    enableStickHead: function (domElem) {
+      // Bind to the resize event of the window object
+      $(window).on('resize', function () {
+        var tableScrollerWidth = $(domElem).find('.dataTableScroller').width();
+        var tableWidth = $(domElem).find('table').width();
+        if (tableScrollerWidth < tableWidth) {
+          $('.dataTableScroller').css('overflow-x', 'scroll');
+        }
+        // Invoke the resize event immediately
+      }).resize();
+    },
     //function triggered when user click on column sort
     onClickSort: function (domElem) {
         var self = this;
@@ -1627,10 +1640,12 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                     top: 0
                 });
 
+                $(".dataTable thead").addClass('with-z-index');
                 tooltip.stop(true, true).fadeIn(250);
             },
             function () {
-                $(this).prev().stop(true, true).fadeOut(400);
+              $(this).prev().stop(true, true).fadeOut(250);
+              $(".dataTable thead").removeClass('with-z-index');
             });
         });
     },
diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 96423295a1..d90e2383d5 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -22,6 +22,17 @@
     vertical-align: text-bottom;
   }
 
+  thead {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 10;
+
+    &.with-z-index {
+      z-index: 150;
+    }
+  }
+
   td.highlight > .ratio {
     visibility: visible;
   }
@@ -187,7 +198,7 @@ table.dataTable tr td.cellSubDataTable {
 }
 
 .cellSubDataTable > .dataTable {
-    padding: 6px 0 0;
+  padding: 6px 0 0;
 }
 
 /* A link in a column in the DataTable */
@@ -398,8 +409,8 @@ table.dataTable img {
 }
 
 .tableIconsGroup > span > span {
-    position:relative;
-    float:left;
+  position:relative;
+  float:left;
 }
 
 .dataTableFooterActiveItem {
@@ -553,7 +564,7 @@ table.dataTable span.cell-tooltip {
 }
 
 td.cellSubDataTable .loadingPiwik {
-    padding:0;
+  padding:0;
 }
 
 .dataTable .searchReset {
@@ -617,10 +628,10 @@ td.cellSubDataTable .loadingPiwik {
     }
 
     .periodName {
-        padding-left:8px;
-        padding-right:8px;
-        font-size:16px;
-        text-transform:capitalize;
+      padding-left:8px;
+      padding-right:8px;
+      font-size:16px;
+      text-transform:capitalize;
     }
   }
 
@@ -630,9 +641,10 @@ td.cellSubDataTable .loadingPiwik {
     padding-left:8px;
   }
 }
-
-div.dataTableScroller {
-  overflow-x: scroll;
+.widgetContent {
+  div.dataTableScroller {
+    overflow-x: scroll;
+  }
 }
 
 .theWidgetContent .card .card-content, table.dataTable {