treetables

jQuery plugin extending jquery-datatables to support tree data

Showing:

Popularity

Downloads/wk

30

GitHub Stars

9

Maintenance

Last Commit

4mos ago

Contributors

4

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

jQuery Grid

Readme

TreeTables plug-in for jQuery

Build Status codecov.io

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: https://datatables.net/download/ 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"}
        ];

        $('#my-table').treeTable({
            "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

Options

TreeTable options are most DataTable options plus:

  • collapsed: bool - whether to start with all child rows collapsed
        $('#my-table').treeTable({
            "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:

        $('#my-table').treeTable({
            "data": myData,
            "columns": [
                {
                    "data": "name"
                },
                {
                    "data": "salary"
                }
            ],
            "order": [[ 1, 'asc' ]]
        });

API

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:

 $('#my-table').DataTable()
               .order([ 2, 'asc' ])
               .draw();

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

To expand all rows:

$('#myTable').data('treeTable')
                .expandAllRows()
                .redraw();

To collapse all rows:

$('#myTable').data('treeTable')
                .collapseAllRows()
                .redraw();

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()

Examples

See examples/README.md

Thanks

This plugin was inspired by a jsfiddle posted by a user called Mytko in the datatables forum: https://datatables.net/forums/discussion/25045/treetable-in-datatables

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100