Sticky headers for bootstrap tables

public/css/bootstrap-tables-sticky-header.css

@@ -0,0 +1,22 @@
+/**
+* @author vincent loh <vincent.ml@gmail.com>
+* @version: v1.0.0
+* https://github.com/vinzloh/bootstrap-table/
+* Sticky header for bootstrap-table
+*/
+
+.fix-sticky {
+    position: fixed;
+    z-index: 100;
+}
+.fix-sticky thead {
+    background: #fff;
+}
+
+.fix-sticky thead th,
+.fix-sticky thead th:first-child {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1px solid #eee;
+    border-radius: 0;
+}

resources/views/partials/bootstrap-table.blade.php

@@ -11,10 +11,28 @@
 <script src="{{ asset('js/jspdf.plugin.autotable.js') }}"></script>
 <script src="{{ asset('js/extensions/export/jquery.base64.js') }}"></script>
 <script src="{{ asset('js/extensions/toolbar/bootstrap-table-toolbar.js') }}"></script>
+<script src="{{ asset('js/extensions/sticky-header/bootstrap-table-sticky-header.js') }}"></script>
 @endif
 
 <script nonce="{{ csrf_token() }}">
-$('.snipe-table').bootstrapTable({
+
+    var $table = $('.snipe-table');
+    $(function () {
+        buildTable($table, 20, 50);
+    });
+    function buildTable($el) {
+        var stickyHeaderOffsetY = 0;
+
+        if ( $('.navbar-fixed-top').css('height') ) {
+            stickyHeaderOffsetY = +$('.navbar-fixed-top').css('height').replace('px','');
+        }
+        if ( $('.navbar-fixed-top').css('margin-bottom') ) {
+            stickyHeaderOffsetY += +$('.navbar-fixed-top').css('margin-bottom').replace('px','');
+        }
+
+
+
+$('.snipe-table').bootstrapTable('destroy').bootstrapTable({
         classes: 'table table-responsive table-no-bordered',
         undefinedText: '',
         iconsPrefix: 'fa',
@@ -38,6 +56,11 @@ $('.snipe-table').bootstrapTable({
         cookie: true,
         cookieExpire: '2y',
         showExport: true,
+
+    stickyHeader: true,
+    stickyHeaderOffsetY: stickyHeaderOffsetY + 'px',
+
+
         @if (isset($showFooter))
             showFooter: true,
         @endif
@@ -101,6 +124,8 @@ $('.snipe-table').bootstrapTable({
         },
 
     });
+    }
+
 
 
     function dateRowCheckStyle(value) {

webpack.mix.js

@@ -23,7 +23,8 @@ mix.styles([
     'resources/assets/css/font-awesome/font-awesome.min.css',
     './bower_components/iCheck/skins/minimal/minimal.css',
     './node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.standalone.css',
-    'public/css/overrides.css',
+    'public/css/bootstrap-tables-sticky-header.css',
+    'public/css/overrides.css'
 ], 'public/css/dist/all.css');
 
 mix.js(