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

Download jQuery Plugin For Scrollable Table With Fixed Header And Cols – Table Scroll

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Scrollable Table With Fixed Header And Cols – Table Scroll, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/jquery-ui.min.js"></script>

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

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

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

view source
1 $('table').table_scroll();

4. Plugin’s default customization options.

view source
01 $('table').table_scroll({
02  
03   // Number of rows in table header.
04   rowsInHeader: null,
05  
06   // Number of rows in table footer.
07   rowsInFooter: null,
08  
09   // Number of columns at the left side of scrollable area that will not be scrolled
10   fixedColumnsLeft: 0,
11  
12   // Number of columns at the right side of scrollable area that will not be scrolled
13   fixedColumnsRight: 0,
14  
15   // Number of columns to scroll to
16   scrollX: 0,
17  
18   // Number of rows to scroll to
19   scrollY: 0,
20  
21   // Number of rows that remains visible in scrollable area
22   rowsInScrollableArea: 10,
23  
24   // Number of columns that remains visible in scrollable area
25   columnsInScrollableArea: 5,
26  
27   // scroll or auto
28   overflowY: 'auto',
29   overflowX: 'auto'
30    
31 });

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

source : jqueryscript.net

Related posts: