Create Tree Structure In HTML Table - simple-tree-table

A simple tree table plugin with jQuery to create a tree structure in your HTML table that enables you to collapse & expand nested table rows with minus and plus buttons.

The plugin also has the ability to store the current collapse/expand state in the local using HTML5 local storage or session storage.

Install & download:

# NPM
$ npm install @kanety/jquery-simple-tree-table --save

How to use it:

1. Assian node ID and parent ID to the table rows as follows:

<table id="basic">
  <tr data-node-id="1">
    <td>1</td>
    <td>text of 1</td>
  </tr>
  <tr data-node-id="1.1" data-node-pid="1">
    <td>1.1</td>
    <td>text of 1.1</td>
  </tr>
  <tr data-node-id="1.1.1" data-node-pid="1.1">
    <td>1.1.1</td>
    <td>text of 1.1.1</td>
  </tr>
  <tr data-node-id="1.1.2" data-node-pid="1.1">
    <td>1.1.2</td>
    <td>text of 1.1.2</td>
  </tr>
  <tr data-node-id="1.2" data-node-pid="1">
    <td>1.2</td>
    <td>text of 1.2</td>
  </tr>
  <tr data-node-id="1.2.1" data-node-pid="1.2">
    <td>1.2.1</td>
    <td>text of 1.2.1</td>
  </tr>
  <tr data-node-id="1.2.2" data-node-pid="1.2">
    <td>1.2.2</td>
    <td>text of 1.2.2</td>
  </tr>
  <tr data-node-id="2">
    <td>2</td>
    <td>text of 2</td>
  </tr>
  <tr data-node-id="2.1" data-node-pid="2">
    <td>2.1</td>
    <td>text of 2.1</td>
  </tr>
  <tr data-node-id="2.2" data-node-pid="2">
    <td>2.2</td>
    <td>text of 2.2</td>
  </tr>
</table>

2. Create 2 buttons to expand and collapse all the table rows at a time.

<button type="button" id="expander">Expand All</button>
<button type="button" id="collapser">Collapse All</button>

3. Import jQuery library together withe the jQuery simple-tree-table plugin's files into the page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="jquery-simple-tree-table.js"></script>
<link rel="stylesheet" href="jquery-simple-tree-table.css"></script>

4. Initailize the plugin on the HTML table and done.

$('#basic').simpleTreeTable({
  expander: $('#expander'),
  collapser: $('#collapser')
});

5. Determin whether to collapse all nodes on page load.

$('#collapsed').simpleTreeTable({
  collapsed: true // default: false
});

6. Determin whether to store the current state.

$('#collapsed').simpleTreeTable({
  storeState: true,
  storeKey: NAMESPACE,
  storeType: 'session' // or local
});

7. Callback functions available.

$('#collapsed').simpleTreeTable({
  onOpen: function($node) {
    $('#message').append("opened " + $node.data('node-id') + " ");
  },
  onClose: function($node) {
    $('#message').append("closed " + $node.data('node-id') + " ");
  }
});

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