jQuery Plugin To Create Collapsible Bootstrap Tables - Bootstrap TreeFy

File Size: 38.5 KB
Views Total: 11134
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Create Collapsible Bootstrap Tables - Bootstrap TreeFy

Bootstrap TreeFy is a small jQuery plugin for Bootstrap that helps you create multilevel, collapsible, expandable table rows like a tree structure.

How to use it:

1. Include jQuery library and the jQuery Bootstrap TreeFy in your Bootstrap project.

<link rel="stylesheet" href="dist/css/bootstrap-treefy.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/bootstrap-treefy.js"></script>

2. Include the Font Awesome for expand / collapse icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Create a Bootstrap table with multi-level rows as follow.

<table class="table table-striped" id="table">
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th>Column D</th>
    <tr data-node="treetable-1">
    <tr data-node="treetable-2" data-pnode="treetable-parent-1">
    <tr data-node="treetable-3" data-pnode="treetable-parent-1">

4. Initialize the plugin and done.


5. Plugin's default options.


// Custom template
expanderTemplate: '<span class="treetable-expander"></span>',
indentTemplate: '<span class="treetable-indent"></span>',

// CSS classes for expander
expanderExpandedClass: 'fa fa-angle-down',
expanderCollapsedClass: 'fa fa-angle-right',

// Index of the column which expander should be added to.
treeColumn: 0,

// Initial CSS class
initStatusClass: 'treetable-expanded'


Change log:


  • v1.1.1

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