jQuery data TreeTable plugin

A good solution of jQuery data TreeTable – display tree of data in a table.

jQuery data TreeTable solution

Treetable is a lightweight jQuery plugin, that makes easy to display a tree of data in HTML table. It’s a great thing for creating nested lists or a directory structures.

This plugin can also use jQuery UI’s Draggable and Droppable components for a solid Drag and Drop support. Among other features we can mention:

– it can display a tree of data in a table column and it does this as unobtrusively as possible

– it allows unlimited tree depth, render collapsed and expanded items

jQuery data TreeTable demo
jQuery data TreeTable demo

Usage

We can install the plugin using bower:

bower install jquery-treetable

The only required dependency is jQuery, however we can also install jQuery UI for Drag&Drop.

We can also handle the setup manually:

– include the files

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

– call the plugin

$("#my_table_id").treetable();

There are a wide options of configuration.

Simple demo:

http://jsfiddle.net/djlerman/bbj8k9pe

License:

This plugin is released under both the MIT and the GPLv2.

Homepage:

http://ludo.cubicphuse.nl/jquery-treetable

Find jQuery data TreeTable on GitHub:

https://github.com/ludo/jquery-treetable

See also:

A nice, editable jQuery table plugin with Bootstrap

JavaScript Excel tables library

A nice and intuitive Bootstrap grid control – jQuery bootgrid

hColumns – jQuery Mac OS like finder

Enjoy!

Share:Share on Facebook8Share on Google+0Tweet about this on TwitterShare on LinkedIn2Pin on Pinterest1