Minimal Collapsible Tree Table Plugin With jQuery - treetable

File Size: 4.6 KB
Views Total: 8348
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Collapsible Tree Table Plugin With jQuery - treetable

Just another jQuery tree table plugin which turns an html table into a tree, with expand/collapse buttons.

How it works:

  • Attach event handlers to the toggle buttons
  • Add depth class to each row
  • Insert expand/collapse buttons for rows with children and mark initial state (expanded or collapsed)

How to use it:

1. Include Font Awesome 4 icon font for expand/collapse buttons (OPTIONAL).

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Include jQuery library and the jQuery treetable.js plugin at the bottom of the web page.

<script src="//"></script>
<script src="src/jquery.treetable.js"></script>

3. Add hierarchical nodes into the table using data-node and data-pnode attributes.

<tr data-node="treetable-1" data-pnode="">

<tr data-node="treetable-1_1" data-pnode="treetable-1">

4. Call the function on the table element and done.


5. Pass the following options to the treeTable() method.

  treeColumn: 0,
  startCollapsed: false,
  expandedClass: 'fa fa-angle-down',
  collapsedClass: 'fa fa-angle-right',
  expanderTemplate: '<span class="treetable-expander"></span>'

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