Treeview Style Hierarchical Table with jQuery and D3.js - Treetable

Treetable is a jQuery plugin used to visualize your hierarchical table rows into a collapsible tree graph using d3.js JavaScript library.

How to use it:

1. Load the necessary jQuery and d3.js JavaScript libraries into your html document.

<script src="/path/to/d3.min.js"></script>
<script src="/path/to/jquery.min.js"></script>

2. Load the jQuery Treetable plugin's JS and CSS files in the document.

<link rel="stylesheet" href="jquery-treetable.css">
<script src="jquery-treetable.js"></script

3. Add hierarchical data into your html table using data-tt-id attribute like this:

<table class="table table-bordered tt-table">
  <thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th style="width:400px">Graph here</th>
    <th>Username</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>
      <div class="tt" data-tt-id="root">Mark</div>
    </td>
    <td>@mdo</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>
      <div class="tt" data-tt-id="jacob" data-tt-parent="root">Jacob</div>
    </td>
    <td>@fat</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>
      <div class="tt" data-tt-id="larry" data-tt-parent="root">Larry</div>
    </td>
    <td>@twitter</td>
  </tr>
  <tr>
    <th scope="row">4</th>
    <td>Tony</td>
    <td>the Bird</td>
    <td>
      <div class="tt" data-tt-id="tony" data-tt-parent="larry">Tony</div>
    </td>
    <td>@twitter</td>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>
      <div class="tt" data-tt-id="asd">Mark</div>
    </td>
    <td>@mdo</td>
  </tr>
  </tbody>
</table>

4. Initialize the plugin by calling the function on the table element and done.

$("table").treetable();

Change log:

2015-12-11

• fix - empty parent = no parent
• fix - incorrectly added class

---

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