Convert Hierarchical Data Into A Tree Table View - tree-table.js

A small and simple jQuery plugin that converts hierarchical data defined in an array of objects into a collapsible/expandable tree table view with tree lines through on the rows.

How to use it:

1. Load the stylesheet tree-table.css for the basic styling of the tree table. Feel free to modify and override the CSS rules in the CSS to fit your design.

<link rel="stylesheet" href="./css/tree-table.css" />

2. Create an empty HTML table on the page.

<div class="tree-table-wrap">
  <table class="tree-table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
      </tr>
    </thead>
    <tbody id="table-tree">
    </tbody>
  </table>
</div>

3. Define your hierarchical data in an array of objects as follows:

var items = [
{
    id: 1,
    priority: 1,
    from: '[email protected]',
    subject: 'Lorem Ipsum is simply dummy text of the printing',
    sentDate: '01/01/2019'
},
{
    id: 2,
    priority: 2,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 1
},
{
    id: 3,
    priority: 3,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 1
},
{
    id: 4,
    priority: 4,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 3
},
{
    id: 5,
    priority: 5,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019'
},
{
    id: 6,
    priority: 6,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019'
},
{
    id: 7,
    priority: 7,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 3
},
{
    id: 8,
    priority: 8,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 3
},
{
    id: 9,
    priority: 9,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 3
},
{
    id: 10,
    priority: 10,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 8
},
{
    id: 11,
    priority: 11,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 8
},
{
    id: 12,
    priority: 12,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 10
},
{
    id: 13,
    priority: 13,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 5
},
{
    id: 17,
    priority: 13,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 13
},
{
    id: 18,
    priority: 13,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 13
},
{
    id: 19,
    priority: 13,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 13
},
{
    id: 14,
    priority: 14,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 5
},
{
    id: 15,
    priority: 14,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 5
},{
    id: 16,
    priority: 14,
    from: '[email protected]',
    subject: 'It is a long established fact that a reader will be distracted',
    sentDate: '01/01/2019',
    parentId: 5
}];

4. Load jQuery library and the plugin's script tree-table.js at the end of the document. Done.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/tree-table.js"></script>

---

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