Display Hierarchical Data

[Player1st]

I have attached a screenshot of a green screen app we have that I would like to move to Valence to add some enhancements to it. The issue I am having is a very common one I run into though. This data is hierarchical so that the blue rows below the green rows are all related to that green row. For this new app, I would like the user to be able to click on any of the green or blue rows and get additional metadata info about these lines and how they were generated. The problem I consistently run into is that there does not seem to be any good way of showing this data in Valence. The best I have found so far is to use the Tree Grid but the issue with the tree grid is that all lower levels are always shown off to the right of the last column in the first level. For data such as this with a lot of first level information, it ends up pushing the level 2 data so far off the screen that it may as well not be there. I would love for a way to show this data on the second level with just a slight indent like you see in the screenshot and still act like a standard grid they can click on but all my efforts to do so thus far have failed.

I have encountered this issue a number of times so far and while I have been able to "make it work", it ends up being really clunky because it becomes custom HTML with embedded buttons or it becomes multiple separate grids that you have to click on the first level to get information on the second (which also makes getting the metadata in this case a whole other type of interface I have to figure out since the row click would now be dedicated to showing the level 2 information), limiting the top level information so that it takes yet more clicks to get all the info they need, or some other inelegant solution.

Is there any way we can get the tree grid to support multi-layer headers or some other solution so that we could properly overlap multiple layers of info rather than having it be so space inefficient and spread out?

[Johnny Major]

Hi,

The Tree widget allows you to share columns among levels, so you don't have to place the "Level 2" columns immediately after the "Level 1" columns. If you assign an alias to a column in the "Select Columns" section and use the same alias in another level's column, they will share the same column.

Of course, the topmost level that has the alias will be used for the header text/properties, so you may want to change the header text to better define the level's content. I suggest breaking the text with a <br> tag. Below is an example of a tree grid sharing columns between the first and second levels.

?Screenshot 2025-07-02 at 2.59.35?PM.png

Screenshot 2025-07-02 at 3.00.09?PM.png

Hopefully, this is more of what you're looking for

[Player1st]

Yes. That will work just fine I think. Thank you.