Sortable & Scrollable Table With Fixed Header - scrollableTable.js

Sortable & Scrollable Table With Fixed Header - scrollableTable.js
File Size: 22.3 KB
Views Total: 2616
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.

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