Next Perpendicular Moonlanding


    1.2.1 • Public • Published

    TreeTables plug-in for jQuery

    Build Status

    TreeTables is a jQuery plugin that enhances the functionality of the popular DataTables plugin.

    DataTables does not support tree data by default, so this plugin adds that support.

    Please note that TreeTables does not support server-side processing.

    Screenshot of plugin in use

    Installation options

    1. Download: First download the base DataTables scripts here: Then also download this repo and include the following scripts on your page:

      <script type="text/javascript" src="DataTables/datatables.min.js"></script>
      <script type="text/javascript" src="treeTable.js"></script>

      And the following css in your document head:

      <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
      <link rel="stylesheet" type="text/css" href="tree-table.css"/>

      See examples for styling with Bootstrap

    2. npm: npm install treetables

    Basic Usage

     const organisationData = [
                {tt_key: 1, tt_parent: 0, name: "CEO"},
                {tt_key: 2, tt_parent: 1, name: "CTO"},
                {tt_key: 3, tt_parent: 2, name: "developer"},
                {tt_key: 4, tt_parent: 1, name: "CFO"}
                "data": myData,
                "columns": [
                        "data": "name"

    Data provided to the table must include the following fields:

    • tt_key: number - a unique row identifier. Must be 1-indexed.
    • tt_parent: number - the key of this row's parent row


    TreeTable options are most DataTable options plus:

    • collapsed: bool - whether to start with all child rows collapsed
                "data": myData,
                "collapsed": true,
                "columns": [
                        "data": "name"

    Please note that the TreeTable plugin adds a left-hand column to the table. This means that user provided columns are 1-indexed instead of 0-indexed.

    E.g., this table will be initially sorted by name:

                "data": myData,
                "columns": [
                        "data": "name"
                        "data": "salary"
                "order": [[ 1, 'asc' ]]


    The DataTables API will be attached to the table element in the usual way, accessible by $('#my-table').DataTable()

    Please note that as with the options, columns are 1-indexed. E.g. to re-sort the above table by salary:

                   .order([ 2, 'asc' ])

    Additionally the TreeTable plugin exposes API methods for collapsing and exanding rows via $('#myTable').data('treeTable')

    To expand all rows:


    To collapse all rows:


    Ajax data sources

    TreeTables has minimal support for ajax data sources. The ajax option can be used as per the DataTables documentation, but it does not support server-side processing, and it does not support the ajax related API methods: ajax.json(), ajax.reload(), ajax.url()


    See examples/


    This plugin was inspired by a jsfiddle posted by a user called Mytko in the datatables forum:


    npm i treetables

    DownloadsWeekly Downloads






    Unpacked Size

    106 kB

    Total Files


    Last publish


    • alexhill
    • emmarussell
    • mwoodbri