jQuery Plugin For Displaying A Tree Of Data In A Table - treetable

treetable is a lightweight jquery plugin that allows you to display a tree of data in an HTML table that's good for creating a directory structure or a nested list. The plugin can also use jQuery UI's Draggable and Droppable components for Complex Tree With Drag and Drop support.

You might also like:

• jQuery Treemap Plugin for Hierarchical Data - jsTreemap
• jQuery Plugin for Tree Widget - jqTree
• Powerful and Multi-Functional jQuery Folder Tree Plugin  - zTree
• jQuery Flat Folder Tree Plugin - simplefolders
• Super Tiny jQuery Tree View Plugin - Good Tree
• Powerful jQuery Dynamic Tree View Plugin - dynatree

Basic Usage:

1. Include required jQuery treetable CSS and a skin css on the web page

<link rel="stylesheet" href="stylesheets/jquery.treetable.css" />
<link rel="stylesheet" href="stylesheets/jquery.treetable.theme.default.css" />

2. Create a simple Tree table.

<table id="example-basic">
  <caption>
    Basic jQuery treetable Example
  </caption>
  <thead>
    <tr>
      <th>Tree column</th>
      <th>Additional data</th>
    </tr>
  </thead>
  <tbody>
    <tr data-tt-id="1">
      <td>Node 1: Click on the icon in front of me to expand this branch.</td>
      <td>I live in the second column.</td>
    </tr>
    <tr data-tt-id="1.1" data-tt-parent-id="1">
      <td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
      <td>Interesting.</td>
    </tr>
    <tr data-tt-id="1.1.1" data-tt-parent-id="1.1">
      <td>Node 1.1.1: I am part of the tree too!</td>
      <td>That's it!</td>
    </tr>
    <tr data-tt-id="2">
      <td>Node 2: I am another root node, but without children</td>
      <td>Hurray!</td>
    </tr>
  </tbody>
</table>

3. Include jQuery library and jQuery Treetable plugin on the page.

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

4. Call the plugin with basic options.

$("#example-basic").treetable({ 
  expandable: true 
});

5. All default settings.

$("#example-basic").treetable({ 
  branchAttr: "ttBranch",
  clickableNodeNames: false,
  column: 0,
  columnElType: "td", // i.e. 'td', 'th' or 'td,th'
  expandable: false,
  expanderTemplate: "<a href='#'>&nbsp;</a>",
  indent: 19,
  indenterTemplate: "<span class='indenter'></span>",
  cellTemplate: '',
  initialState: "collapsed",
  nodeIdAttr: "ttId", // maps to data-tt-id
  parentIdAttr: "ttParentId", // maps to data-tt-parent-id
  stringExpand: "Expand",
  stringCollapse: "Collapse",

  // Events
  onInitialized: null,
  onNodeCollapse: null,
  onNodeExpand: null,
  onNodeInitialized: null
});

Changelog:

2020-11-25

• Improved performance

2017-05-04

• cellTemplate option

v3.2.0 (2014-06-13)

• [ENHANCEMENT] Simplified directory structure
• [ENHANCEMENT] Do not show outline around indenter 
• [ENHANCEMENT] Use closure for better compatibility with other jQuery versions/plugins
• [ENHANCEMENT] Bowerified 
• [BUG] Fix for nodes with undefined parent
• [BUG] Fix removeNode() not deleting node from parent

v3.1.0 (2013-10-14)

• [FEATURE] Added branch sort API 
• [FEATURE] Added removeNode function to completely remove a node and its descendants 
• [ENHANCEMENT] Embed Base64 encoded theme images in CSS 
• [ENHANCEMENT] Do not show child nodes on expand of a hidden node 
• [BUG] Moving nodes around caused order of children to be reversed
• [BUG] Bootstrap v3 compatibility fix for indenter
• [BUG] D&D example code should not break when nested inside other table 
• [BUG] Node expanders wouldn't render correctly when nodes added dynamically 

---

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