Hello all -

This is about Treetables (TreeTable? Pick one and stick with it - I see it both ways on the MDB website).

Trying to use it and wow... there are so many issues with it. I've got it mostly working, having to write my own JS code to fix/patch the broken stuff. But just recently I ran into something that is not so easy to fix...

Simply including the treetable plugin CSS file breaks all normal tables. How did this get past your QA? More specifically - this:

tr div { max-height: 100px; -webkit-transition: max-height .6s ease,padding .6s ease; transition: max-height .6s ease,padding .6s ease; }

That comes from the treetable CSS file, however it is applied to all "tr div", not just for treetables.

The other issue I've had with treetables, that I had to write some JS code to fix - is that treetables cannot handle sublevels with no children properly - it will show the open/close arrow when there should not be one. This treetable snippet, shows this problem -

https://mdbootstrap.com/snippets/standard/marvin_herbold/3666287

The "thing with no children" row should not have any drop down caret. It looks like that the treetable JS assumes (wrongly) that all rows having the data-depth attribute should have the drop down caret. It actually needs to check if the row after it has either no data-depth attribute or one with a higher value. If there is no row, or it has a data-depth with the same or lower value, do not display the arrow.

There are also issues when trying to use custom padding in the TD - the calculations are all off and you end up with gaps between table rows when they are closed.

Another issue is that if you call collapseAll() to close the treetable, and then you click to open up any one of the rows... you'll see that all the arrows for the child rows are in the wrong state (they indicate the child rows are in the open state when they should be indicating closed).