hoangweb
3/8/2018 - 10:22 AM

js.floatThead

Float the table header on scroll. floating the header while scrolling within the window. https://github.com/mkoryak/floatThead

var $table = $('table.demo');
//init
$table.floatThead({
  top: 25,
  position: 'fixed',
  
  //specify a container element inside of which the table will scroll
  scrollContainer: function($table){
    return $table.closest('.wrapper');  //must exist in DOM & wrap the table
  },
  
  //Responsive window scrolling: http://getbootstrap.com/css/#tables-responsive
  //specify a responsive container element within which the table will scroll horizontally at some screen sizes
  responsiveContainer: function($table){
    return $table.closest('.table-responsive');
  }
    
});

/**---------------------------------------------------------------------------------------------------
 *  Methods
*/
// unfloat the headers
var reinit = $table.floatThead('destroy');
// ... later you want to re-float the headers with same options
reinit();

//Cause header to realign itself to the correct position, then reflow it
$table.floatThead();
$table.floatThead('reflow');  //assume: DOM has changed. must reflow floatThead