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="//code.jquery.com/jquery.min.js"></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>

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

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

$('table').treeTable();

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

$('table').treeTable({
  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.