Treegrid library with connector functionality?

82 views Asked by At

I have data that needs multiple columns. One of the columns (preferably not first, but can be) will display nested tree structure like data.

Both maxazan's TreeGrid.js and Ludo van den Boom's treetable.js accomplish what I want, almost. It can be very hard to distinguish the hierarchy by quick glance:

The data hierarchy is but unclear here

enter image description here

And here would be solution: Adding connectors ->

The visualisation fixed with connectors

enter image description here

The actual data has 7 columns

...but TreeGrid nor Treetable support this functionality. In both, the indentation is accomplished through spans with padding. Treetable uses a single spans, which makes connector implementation near impossible. TreeGrid uses multiple spans, where I could imitate something connector like to distinguish the levels better.

How would I implement connectors to eg. TreeGrid, or are there any similar js libraries for creating tree grids with connectors that I have missed?

If your answer is: "it's semantically incorrect, you should use nested lists" (in which connectors are quite trivial to implement), then my follow-up question is:

What are the different possibilities to vertically align the elements inside list elements inside nested unordered lists? The old version used unordered lists with floating elements, very fiddly code to resize them accordingly if window is resized etc, which broke in way too many cases and was horrible to maintain.

0

There are 0 answers