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

File Size: 43.9 KB
Views Total: 60686
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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">
    Basic jQuery treetable Example
      <th>Tree column</th>
      <th>Additional data</th>
    <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 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>
    <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 data-tt-id="2">
      <td>Node 2: I am another root node, but without children</td>

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.

  expandable: true 

5. All default settings.

  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



  • Improved performance


  • 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.