sortable scrollable fixed header - Free Download Sortable & Scrollable Table With Fixed Header - scrollableTable.js

Free Download Sortable & Scrollable Table With Fixed Header – scrollableTable.js

Posted on

This time I will share jQuery Plugin and tutorial about Sortable & Scrollable Table With Fixed Header – scrollableTable.js, hope it will help you in programming stack.

sortable scrollable fixed header - Free Download Sortable & Scrollable Table With Fixed Header - scrollableTable.js
File Size: 22.3 KB
Views Total: 4160
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

scrollableTable.js is a dynamic table enhancement plugin that helps you to generate scrollable, sortable, and filterable tables with fixed table headers. Licensed under the Apache-2.0. 

Requires the tableSorter plugin to provide a fast and performant table row sorting functionality.

How to use it:

1. Load the needed jQuery library n the document.

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

2. Download and load the scrollableTable.js plugin after jQuery.

1 <link rel="stylesheet" href="/path/to/css/scrollableTable.css" />
2 <script src="/path/to/js/scrollableTable.js"></script>

3. Create a new scrollableTable instance and specify the container in which you want to place the HTML table.

1 <div id="wrapper"></div>
1 var scrollableTable = new scrollableTable('scrollableTable', 'wrapper')

4. Insert fixed headers to the HTML table.

1 <div id="wrapper"></div>
1 scrollableTable.setTableHeader(["Name", "Id", "Value"])

5. Set the max height to make the HTML table scrollable.

1 scrollableTable.setTableHeight( () => { return $( window ).height() - 118 } )
2 // or e.g.: scrollableTable.setTableHeight(500)

6. Insert tabular data into the HTML table.

01 var testData = [
02     {
03       "id": 1,
04       "name": "name1",
05       "value": "value 1",
06     },
07     {
08       "id": 2,
09       "name": "name2",
10       "value": "value 2",
11     },
12     {
13       "id": 3,
14       "name": "name3",
15       "value": "value 3",
16     },
17     // more data here
18 ]
1 // .setTreeTableContent(data, eventType, columns)
2 scrollableTable.setTreeTableContent(testData, "testDataEventType", ["name", "id","value"])

7. The plugin also supports nested tabular data. In this example, we’re going to create a sortable and scrollable tree table.

01 var testData = [
02     {
03       "id": 1,
04       "name": "name1",
05       "value": "Vaule 1",
06       "subtree": [
07         {
08           "id": 11,
09           "name": "name1.1",
10           "value": "Vaule 1.1",
11           "subtree": []
12         },{
13           "id": 12,
14           "name": "name1.2",
15           "value": "Vaule 1.2",
16           "subtree": []
17         },{
18           "id": 13,
19           "name": "name1.3",
20           "value": "Vaule 1.3",
21           "subtree": [
22             {
23               "id": 131,
24               "name": "name1.3.1",
25               "value": "Vaule 1.3.1",
26               "subtree": []
27             }
28           ]
29         }
30       ]
31     }
32 ]
1 scrollableTable.setTreeTableContent(testData, "testDataEventType", ["name", "id","value"], "subtree")

8. Expand all child table rows on init.

1 scrollableTable.expandTree()

9. Return the tabular data after you click a table row.

01 $( document ).on("testDataEventType", function(event, nestedIndex) {
02   console.log("NestedIndex: "+JSON.stringify(nestedIndex))
03  
04   var object = testData[nestedIndex[0]]
05   for(var i=1; i<nestedIndex.length; i++) { object = object.subtree[nestedIndex[i]] }
06  
07   $('#displayArea').html(
08       "'testDataEventType' from row with ID: "+JSON.stringify(nestedIndex) +" was triggered.nn"+
09       "Row data: n" +
10       JSON.stringify( object, null, 4) )
11 });

10. Enable a search filed to filter through the tabublar data.

1 <input id="searchField" type="text" value="" oninput="filterTable()">
1 function filterTable() {
2   var filterString = $('#searchField').val()
3   scrollableTable.filter(filterString)
4 }

Changelog:

2020-01-27

  • bugfix

2020-01-26

  • bugfix

2020-01-24

  • bugfix

2020-01-17

  • added findStr for rows

2020-01-14

  • Refactor

2020-01-13

  • Code improved

2020-01-12

  • implemented sorting for table and removed tablesorter

2019-

source : jquery.net