implement sticky headers

.eslintrc

@@ -13,7 +13,7 @@
     "array-bracket-spacing": 2,
     "keyword-spacing": ["error", { "after": true, "before": true }],
     "max-depth": [2, 7],
-    "max-statements": [2, 131],
+    "max-statements": [2, 133],
     "complexity": [2, 41],
     "no-unused-vars": 2,
     "no-eval": 2,

src/tablefilter.js

@@ -859,6 +859,9 @@ export class TableFilter {
          */
         this.prfxResponsive = 'resp';
 
+        /** @private */
+        this.stickyCssClass = 'sticky';
+
         /*** extensions ***/
         /**
          * List of loaded extensions
@@ -907,6 +910,12 @@ export class TableFilter {
          */
         this.toolbar = isObj(f.toolbar) || Boolean(f.toolbar);
 
+        /**
+         * Enable sticky headers
+         * @type {Boolean}
+         */
+        this.stickyHeaders = Boolean(f.sticky_headers);
+
         /**
          * Features registry
          * @private
@@ -1048,6 +1057,9 @@ export class TableFilter {
             if (this.colWidths.length > 0) {
                 this.setFixedLayout();
             }
+            if (this.stickyHeaders && this.dom().tHead) {
+                addClass(this.dom().tHead, this.stickyCssClass);
+            }
         }
 
         /* Load extensions */

static/style/help.styl

@@ -32,6 +32,7 @@ div.helpCont
     color                   #333
     background              #fff
     text-align              left
+    z-index                 1000
 
     a
         color               #cc0000

static/style/table.styl

@@ -28,10 +28,16 @@ table.TF
         border-bottom       1px solid $td-border-color
         text-overflow       ellipsis
 
-    // responsiveness
+    // responsive
     &.resp
         display             block
         overflow-x          auto
 
         .sort-arrow
             position        initial
+    
+    // stick headers
+    thead.sticky
+        th
+            position            sticky
+            top                 0

static/templates/auto-filter.html

@@ -30,6 +30,7 @@
         },
         btn_reset: true,
         status_bar: true,
+        sticky_headers: true,
         msg_filter: 'Filtering...'
     };
 

static/templates/load-filters-on-demand.html

@@ -20,14 +20,15 @@ var tfConfig = {
     base_path: '../dist/tablefilter/',
     col_widths: [
         '150px', '100px', '100px',
-        '70px', '70px', '70px',
-        '70px', '60px', '60px'
+        '100px', '100px', '100px',
+        '90px', '90px', '90px'
     ],
     alternate_rows: true,
     rows_counter: true,
     btn_reset: true,
     status_bar: true,
     load_filters_on_demand: true,
+    sticky_headers: true,
     col_0: 'multiple',
     col_1: 'select',
     col_2: 'checklist'