jQuery Plugin For Scrollable Table With Fixed Header And Cols - Table Scroll

File Size: 22.1 KB
Views Total: 25810
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Scrollable Table With Fixed Header And Cols - Table Scroll

Table Scroll is a touch-enabled and configurable jQuery scrollable table plugin that adds vertical and horizontal scrolling capabilities to your complex large data table with floating thead, tfoot and fixed columns.

How to use it:

1. Add both jQuery and jQuery UI into your html file.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Include the jQuery table scroll plugin's files after jQuery.

<script src="table-scroll.min.js"></script>

3. Call the function on the table to make it scrollable with floating thead and tfoot.

$('table').table_scroll();

4. Plugin's default customization options.

$('table').table_scroll({

  // Number of rows in table header. 
  rowsInHeader: null,

  // Number of rows in table footer. 
  rowsInFooter: null,

  // Number of columns at the left side of scrollable area that will not be scrolled
  fixedColumnsLeft: 0,

  // Number of columns at the right side of scrollable area that will not be scrolled
  fixedColumnsRight: 0,

  // Number of columns to scroll to
  scrollX: 0,

  // Number of rows to scroll to
  scrollY: 0,

  // Number of rows that remains visible in scrollable area
  rowsInScrollableArea: 10,

  // Number of columns that remains visible in scrollable area
  columnsInScrollableArea: 5,

  // scroll or auto
  overflowY: 'auto', 
  overflowX: 'auto'
  
});

This awesome jQuery plugin is developed by volodymyr-bobko. For more Advanced Usages, please check the demo page or visit the official website.