Sortable & Scrollable Table With Fixed Header - scrollableTable.js

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.

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

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

<link rel="stylesheet" href="/path/to/css/scrollableTable.css" />
<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.

<div id="wrapper"></div>

var scrollableTable = new scrollableTable('scrollableTable', 'wrapper')

4. Insert fixed headers to the HTML table.

<div id="wrapper"></div>

scrollableTable.setTableHeader(["Name", "Id", "Value"])

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

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

6. Insert tabular data into the HTML table.

var testData = [
    {
      "id": 1,
      "name": "name1",
      "value": "value 1",
    },
    {
      "id": 2,
      "name": "name2",
      "value": "value 2",
    },
    {
      "id": 3,
      "name": "name3",
      "value": "value 3",
    },
    // more data here
]

// .setTreeTableContent(data, eventType, columns)
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.

var testData = [
    {
      "id": 1,
      "name": "name1",
      "value": "Vaule 1",
      "subtree": [
        {
          "id": 11,
          "name": "name1.1",
          "value": "Vaule 1.1",
          "subtree": []
        },{
          "id": 12,
          "name": "name1.2",
          "value": "Vaule 1.2",
          "subtree": []
        },{
          "id": 13,
          "name": "name1.3",
          "value": "Vaule 1.3",
          "subtree": [
            {
              "id": 131,
              "name": "name1.3.1",
              "value": "Vaule 1.3.1",
              "subtree": []
            }
          ]
        }
      ]
    }
]

scrollableTable.setTreeTableContent(testData, "testDataEventType", ["name", "id","value"], "subtree")

8. Expand all child table rows on init.

scrollableTable.expandTree()

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

$( document ).on("testDataEventType", function(event, nestedIndex) {
  console.log("NestedIndex: "+JSON.stringify(nestedIndex))

  var object = testData[nestedIndex[0]]
  for(var i=1; i<nestedIndex.length; i++) { object = object.subtree[nestedIndex[i]] }

  $('#displayArea').html(
      "'testDataEventType' from row with ID: "+JSON.stringify(nestedIndex) +" was triggered.\n\n"+
      "Row data: \n" +
      JSON.stringify( object, null, 4) )
});

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

<input id="searchField" type="text" value="" oninput="filterTable()">

function filterTable() {
  var filterString = $('#searchField').val()
  scrollableTable.filter(filterString)
}

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-12-12

• expand and collapse works now only by clicking on icon

---

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