add new extension - sticky header

src/extensions/sticky-header/README.md

@@ -0,0 +1,24 @@
+# Table sticky-header
+
+This is an extension for [Bootstrap table](http://github.com/wenzhixin/bootstrap-table) module which provides a sticky header for the table when scrolling. </br>
+You must include the bootstrap-table-sticky-header.css file in order to get the appropriate style
+
+## Usage
+
+```html
+<script src="extensions/group-by/bootstrap-table-sticky-header.js"></script>
+```
+
+## Options
+
+### stickyHeader
+
+* type: Boolean
+* description: Set true to use sticky header.
+* default: `false`
+
+### stickyHeaderOffsetY
+
+* type: String
+* description: Set the Y offset from the top of the window to pin the sticky header. If there is a fixed navigation bar with a height of 60px, this value would be `60px`.
+* default: `undefined`

src/extensions/sticky-header/bootstrap-table-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;
+}

src/extensions/sticky-header/bootstrap-table-sticky-header.js

@@ -0,0 +1,102 @@
+/**
+ * @author vincent loh <vincent.ml@gmail.com>
+ * @version: v1.0.0
+ * https://github.com/vinzloh/bootstrap-table/
+ * Sticky header for bootstrap-table
+ */
+
+(function ($) {
+    'use strict';
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        stickyHeader: false
+    });
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _initHeader = BootstrapTable.prototype.initHeader;
+
+    BootstrapTable.prototype.initHeader = function () {
+        var that = this;
+        _initHeader.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (!this.options.stickyHeader) return;
+
+        var table = this.$tableBody.find('table');
+        var table_id = table.attr('id');
+        var header_id = table.attr('id') + '-sticky-header';
+        var sticky_header_container_id = header_id +'-sticky-header-container';
+        var anchor_begin_id = header_id +'_sticky_anchor_begin';
+        var anchor_end_id = header_id +'_sticky_anchor_end';
+        // add begin and end anchors to track table position
+        table.before('<div id="'+sticky_header_container_id+'" class="hidden"></div>');
+        table.before('<div id="'+anchor_begin_id+'"></div>');
+        table.after('<div id="'+anchor_end_id+'"></div>');
+
+        table.find('thead').attr('id', header_id);
+
+        // clone header just once, to be used as sticky header
+        // deep clone header. using source header affects tbody>td width
+        this.$stickyHeader = $($('#'+header_id).clone());
+        // avoid id conflict
+        this.$stickyHeader.removeAttr('id');
+
+        // render sticky on window scroll or resize
+        $(window).on('resize.'+table_id, table, render_sticky_header);
+        $(window).on('scroll.'+table_id, table, render_sticky_header);
+        // render sticky when table scroll left-right
+        table.closest('.fixed-table-container').find('.fixed-table-body').on('scroll.'+table_id, table, match_position_x);
+
+        function render_sticky_header(event){
+            var table = event.data;
+            var table_header_id = table.find('thead').attr('id');
+            // console.log('render_sticky_header for > '+table_header_id);
+            if (table.length < 1 || $('#'+table_id).length < 1){
+                // turn off window listeners
+                $(window).off('resize.'+table_id);
+                $(window).off('scroll.'+table_id);
+                table.closest('.fixed-table-container').find('.fixed-table-body').off('scroll.'+table_id);
+                return;
+            }
+            // get header height
+            var header_height = '0';
+            if (that.options.stickyHeaderOffsetY) header_height = that.options.stickyHeaderOffsetY.replace('px','');
+            // window scroll top
+            var t = $(window).scrollTop();
+            // top anchor scroll position, minus header height
+            var e = $("#"+anchor_begin_id).offset().top - header_height;
+            // bottom anchor scroll position, minus header height, minus sticky height
+            var e_end = $("#"+anchor_end_id).offset().top - header_height - $('#'+table_header_id).css('height').replace('px','');
+            // show sticky when top anchor touches header, and when bottom anchor not exceeded
+            if (t > e && t <= e_end) {
+                // ensure clone and source column widths are the same
+                $.each( that.$stickyHeader.find('tr').eq(0).find('th'), function (index, item) {
+                    $(item).css('min-width', $('#'+table_header_id+' tr').eq(0).find('th').eq(index).css('width'));
+                });
+                // match bootstrap table style
+                $("#"+sticky_header_container_id).removeClass('hidden').addClass("fix-sticky fixed-table-container") ;
+                // stick it in position
+                $("#"+sticky_header_container_id).css('top', header_height + 'px');
+                // create scrollable container for header
+                var scrollable_div = $('<div style="position:absolute;width:100%;overflow-x:hidden;" />');
+                // append cloned header to dom
+                $("#"+sticky_header_container_id).html(scrollable_div.append(that.$stickyHeader));
+                // match clone and source header positions when left-right scroll
+                match_position_x(event);
+            } else {
+                // hide sticky
+                $("#"+sticky_header_container_id).removeClass("fix-sticky").addClass('hidden');
+            }
+
+        }
+        function match_position_x(event){
+            var table = event.data;
+            var table_header_id = table.find('thead').attr('id');
+            // match clone and source header positions when left-right scroll
+            $("#"+sticky_header_container_id).css(
+                'width', table.closest('.fixed-table-body').css('width')
+            );
+            $("#"+sticky_header_container_id+" thead").parent().scrollLeft(Math.abs($('#'+table_header_id).position().left));
+        }
+    };
+
+})(jQuery);