How to create a collapsing tree table in html/css/js?

Question

I have some data to display that is both tabular and hierarchical. I'd like to let the user be able to expand and collapse the nodes.

Sort of like this, except functional:

http://www.maxdesign.com.au/articles/tree-table/

What would be the best way to approach this? I'm not adverse to using an off-the-shelf plugin.

score 44 · Answer 1 · edited Jun 26 '21 at 04:29

SlickGrid has this functionality, see the tree demo.

If you want to build your own, here is an example (jsFiddle demo): Build your table with a data-depth attribute to indicate the depth of the item in the tree (the levelX CSS classes are just for styling indentation):

<table id="mytable">
    <tr data-depth="0" class="collapse level0">
        <td><span class="toggle collapse"></span>Item 1</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td><span class="toggle"></span>Item 2</td>
        <td>123</td>
    </tr>
</table>

Then when a toggle link is clicked, use Javascript to hide all <tr> elements until a <tr> of equal or less depth is found (excluding those already collapsed):

$(function() {
    $('#mytable').on('click', '.toggle', function () {
        //Gets all <tr>'s  of greater depth below element in the table
        var findChildren = function (tr) {
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var el = $(this);
        var tr = el.closest('tr'); //Get <tr> parent of toggle button
        var children = findChildren(tr);

        //Remove already collapsed nodes from children so that we don't
        //make them visible. 
        //(Confused? Remove this code and close Item 2, close Item 1 
        //then open Item 1 again, then you will understand)
        var subnodes = children.filter('.expand');
        subnodes.each(function () {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });

        //Change icon and hide/show children
        if (tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    });
});

Very nice:-) Just a small correction: Comment should be: // Gets all 's of greater depth.. NOT // Gets all 's of greater or equal depth.. It is only the tr's with a grater depth that we want to hide. Equal depth we want to show:) The logic is still right. — Sindre Myren, Feb 12 '13 at 10:11
this comment might get flagged, but i don't care, i want to thank you for that simple implementation of collapsible tree grid. you deserve a thousand upvote! — stevenferrer, Oct 23 '18 at 08:25
Looks good! Can you tell how it can be initially started as everything collapsed? — user2988257, Feb 22 '21 at 15:07

John Slegers · Answer 2 · 2018-07-28T18:09:16.073

In modern browsers, you need only very little to code to create a collapsible tree :

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        if(classList.contains("open")) {
            classList.remove('open');
            var opensubs = parent.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open');
        }
        e.preventDefault();
    });
}

body {
    font-family: Arial;
}

ul.tree li {
    list-style-type: none;
    position: relative;
}

ul.tree li ul {
    display: none;
}

ul.tree li.open > ul {
    display: block;
}

ul.tree li a {
    color: black;
    text-decoration: none;
}

ul.tree li a:before {
    height: 1em;
    padding:0 .1em;
    font-size: .8em;
    display: block;
    position: absolute;
    left: -1.3em;
    top: .2em;
}

ul.tree li > a:not(:last-child):before {
    content: '+';
}

ul.tree li.open > a:not(:last-child):before {
    content: '-';
}

<ul class="tree">
  <li><a href="#">Part 1</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#">Part 2</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#">Part 3</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

(see also this Fiddle)

Thank you for your wonderful answer. I'm trying to implement your solution but it doesn't seem to work in my setup. I've posted a question about this. Please let me know what am I doing wrong? http://stackoverflow.com/questions/43016555/couldnt-apply-javascript-to-my-template-in-flask-how-do-i-resolve-that-in-the — आनंद, Mar 25 '17 at 14:59
@AnandTyagi : Can you post your code on [**JSFiddle**](https://jsfiddle.net/), or somewhere else online? I'll need to be able to debug your code to figure out what's wrong with it! — John Slegers, Mar 27 '17 at 08:06
Thanks for responding. The issue has been resolved by the good people of stackoverlow. — आनंद, Mar 27 '17 at 11:10
I know this is old, but I found this to be the simplest and best answer. Works perfect in my project — lostInTheTetons, Apr 14 '17 at 15:02
I think you might need to `e.preventDefault()` for it to work — ospider, Jul 28 '18 at 00:54
@ospider : It works fine without `e.preventDefault()`. Still, it is indeed better to add it, so I updated my code. — John Slegers, Jul 28 '18 at 18:10
@JohnSlegers href url is applied to + symbol also. When i try to click it goes to the href location. Href url must be only apply to
@आनंद : Clicking the + symbol should open the submenu. It works fine in my browser. Could you please tell me what browser and operating system you are using? — John Slegers, Feb 01 '19 at 11:12
This code **does not** take care of the tabular part of the data. — Ronan Paixão, Oct 18 '19 at 19:04
@JohnSlegers Yes. The OP specifically asked about displaying data that is *"both tabular and hierarchical"*. Your example shows hierarchical data, but no tabular data, which should be displayed in columns to the right of the tree (see the OP's link for an example). — Ronan Paixão, Oct 19 '19 at 19:20

joe_coolish · Answer 3 · 2021-03-25T20:02:41.817

jquery is your friend here.

http://docs.jquery.com/UI/Tree

If you want to make your own, here is some high level guidance:

Display all of your data as <ul /> elements with the inner data as nested <ul />, and then use the jquery:

$('.ulClass').click(function(){ $(this).children().toggle(); });

I believe that is correct. Something like that.

EDIT:

Here is a complete example.

 $(".Collapsable").click(function () {

    $(this).parent().children().toggle();
    $(this).toggle();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><span class="Collapsable">item 1</span><ul>
        <li><span class="Collapsable">item 1</span></li>
        <li><span class="Collapsable">item 2</span><ul>
            <li><span class="Collapsable">item 1</span></li>
            <li><span class="Collapsable">item 2</span></li>
            <li><span class="Collapsable">item 3</span></li>
            <li><span class="Collapsable">item 4</span></li>
        </ul>
        </li>
        <li><span class="Collapsable">item 3</span></li>
        <li><span class="Collapsable">item 4</span><ul>
            <li><span class="Collapsable">item 1</span></li>
            <li><span class="Collapsable">item 2</span></li>
            <li><span class="Collapsable">item 3</span></li>
            <li><span class="Collapsable">item 4</span></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><span class="Collapsable">item 2</span><ul>
        <li><span class="Collapsable">item 1</span></li>
        <li><span class="Collapsable">item 2</span></li>
        <li><span class="Collapsable">item 3</span></li>
        <li><span class="Collapsable">item 4</span></li>
    </ul>
    </li>
    <li><span class="Collapsable">item 3</span><ul>
        <li><span class="Collapsable">item 1</span></li>
        <li><span class="Collapsable">item 2</span></li>
        <li><span class="Collapsable">item 3</span></li>
        <li><span class="Collapsable">item 4</span></li>
    </ul>
    </li>
    <li><span class="Collapsable">item 4</span></li>
</ul>

This works pretty well, but for me it starts out with all paths expanded - what needs to be modified so that it starts with everything collapsed to the first level? *Edit: I erased my message to edit it - thanks to @joe_coolish for the quick response. .each() is what I needed — ZeekLTK, Nov 11 '13 at 18:57
No prob :) jQuery is awesome! You can do so much so quickly! p.s., I updated the jsfiddle to be more reusable. Here is the new link: http://jsfiddle.net/5Q8rJ/1/ — joe_coolish, Nov 11 '13 at 19:59
This is exactly what I want, I'm just wondering how would I set the background to be alternating and full width, i.e. item 4 in item 2 in item 1, has the same width background as item1? So as to make it appear like a "tree-table". — halivingston, Apr 13 '14 at 04:34
@user986697 - I'm not sure what you mean? Are you talking about CSS? — joe_coolish, Apr 14 '14 at 01:28
@user986697 - let me know if this is what you were referring to: http://jsfiddle.net/5Q8rJ/67/ — joe_coolish, Apr 14 '14 at 02:26
The link [http://docs.jquery.com/UI/Tree](http://docs.jquery.com/UI/Tree) just redirects me to [http://jquery.com](http://jquery.com) — mossherder, Sep 29 '19 at 03:33
This code **does not** take care of the tabular part of the data — Jens, Jul 28 '22 at 10:59

score 6 · Answer 4 · answered Mar 25 '16 at 15:19

6

HTML 5 allows summary tag, details element. That can be used to view or hide (collapse/expand) a section. Link

answered Mar 25 '16 at 15:19

rational

121
1
11

1

Man got my hopes up there for a second. – Daniel Szabo Oct 09 '18 at 19:19
This was good enough for me to create a quick and dirty tree view. To create the indentation for the lower levels, I used unordered lists with hidden bullets (`
– Bas Swinckels Jul 26 '23 at 13:36

score 6 · Answer 5 · answered Apr 12 '11 at 14:13

I'll throw jsTree into the ring, too. I've found it fairly adaptable to your particular situation. It's packed as a jQuery plugin.

It can run from a variety of data sources, but my favorite is a simple nested list, as described by @joe_coolish or here:

<ul>
  <li>
    Item 1
    <ul>
      <li>Item 1.1</li>
      ...
    </ul>
  </li>
  ...
</ul>

This structure fails gracefully into a static tree when JS is not available in the client, and is easy enough to read and understand from a coding perspective.

This code **does not** take care of the tabular part of the data — Jens, Jul 28 '22 at 11:00

score 4 · Answer 6 · answered Apr 28 '16 at 00:17

You can try jQuery treegrid (http://maxazan.github.io/jquery-treegrid/) or jQuery treetable (http://ludo.cubicphuse.nl/jquery-treetable/)

Both are using HTML <table> tag format and styled the as tree.

The jQuery treetable is using data-tt-id and data-tt-parent-id for determining the parent and child of the tree. Usage example:

<table id="tree">
  <tr data-tt-id="1">
    <td>Parent</td>
  </tr>
  <tr data-tt-id="2" data-tt-parent-id="1">
    <td>Child</td>
  </tr>
</table>
$("#tree").treetable({ expandable: true });

Meanwhile, jQuery treegrid is using only class for styling the tree. Usage example:

<table class="tree">
    <tr class="treegrid-1">
        <td>Root node</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-2 treegrid-parent-1">
        <td>Node 1-1</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-3 treegrid-parent-1">
        <td>Node 1-2</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-4 treegrid-parent-3">
        <td>Node 1-2-1</td><td>Additional info</td>
    </tr>
</table>
<script type="text/javascript">
  $('.tree').treegrid();
</script>

This has performance issues with huge data. just for 1500 nodes it takes approx 1 minute. — 3AK, Jun 18 '16 at 08:17

How to create a collapsing tree table in html/css/js?

6 Answers6

Linked

Related