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

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 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>text of 1</td>
  <tr data-node-id="1.1" data-node-pid="1">
    <td>text of 1.1</td>
  <tr data-node-id="1.1.1" data-node-pid="1.1">
    <td>text of 1.1.1</td>
  <tr data-node-id="1.1.2" data-node-pid="1.1">
    <td>text of 1.1.2</td>
  <tr data-node-id="1.2" data-node-pid="1">
    <td>text of 1.2</td>
  <tr data-node-id="1.2.1" data-node-pid="1.2">
    <td>text of 1.2.1</td>
  <tr data-node-id="1.2.2" data-node-pid="1.2">
    <td>text of 1.2.2</td>
  <tr data-node-id="2">
    <td>text of 2</td>
  <tr data-node-id="2.1" data-node-pid="2">
    <td>text of 2.1</td>
  <tr data-node-id="2.2" data-node-pid="2">
    <td>text of 2.2</td>

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

  expander: $('#expander'),
  collapser: $('#collapser')

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

  collapsed: true // default: false

6. Determin whether to store the current state.

  storeState: true,
  storeKey: NAMESPACE,
  storeType: 'session' // or local

7. Callback functions available.

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

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

  • Publication date: 10.12.2018
  • Source