TreeTable component and 6.4 branch

Good morning Vaadin developers!

I bet some of you may have been eyeing on the 6.4 milestone and its TreeTable goal. The TreeTable will at least in the beginning be released as an add-on. I implemented a first draft of the component based on experiences by TreeTable pioneer Henrik, but I’d be happy to hear your favorite use cases for it to ensure it is doing what it should.

The Add-on requires a fresh 6.4 nightly build, but I guarantee you want to start using the 6.4 branch anyways. John, our latest talent in rnd team, has built keyboard navigation into Tree and Table components. Once you start using them, there is no going back. As always there may be a bit more bugs in the “unstable” branch, but that is where you can help us.

So please, test, report issues and share comments from both TreeTable and other new features in 6.4 branch!

You can download the TreeTable add-on from the Directory

or check out the whole add-on project via svn

6.4 nightly builds:


Even sorting by clicking on the headers works as expected :slight_smile:


When looking at the demo, I can’t quite figure out whether the “sort tree via drag&drop” as in is planned to be supported in the tree table. In my intended application, the user will base his/her reorganization of the tree based on affinities found in the right-hand side table.

Sorry if I’m missing something obvious, I have not yet had time to play with the code.


Sorry for taking this long to respond. I was working with code splitting, but now on TreeTable again for some hours.

The TreeTable is extended from the Table component so in theory it should support all same features. However, previous versions still had some issues and not least with drag and drop. With the version 0.3.1 now downloadable from the Directory, things should be resolved. Not that it requires a fresh trunk build. Next 6.4 nightly will be good.

I built some demo apps. In WorkLog you can test the DragAndDrop too.



I think the TreeTable is great component and I just started using it. A brief question though:

I have a tree table with checkboxes for individual row selections in the leftmost column. I also have a checkbox beneath the tree table where a user can select or deselect all rows with one click. I do this by iterating over all items. My problem is that the iteration does not ‘see’ the collapsed rows so that when the row is expanded it is not selected although it should be.

What is the best way for me to make this work? Is it possible to include also collapsed rows in the iteration and how do I do that? Or is there a collapse/expand event that I can listen to?

Your help would be appreciated, thanks!


Hi there,

unfortunately, i have the same problem… seems like there is no solution to this?

although, a possible workaround may be to expand the whole tree before getting the selected items with the loop. i did not test this, but it’s worth a try.

maybe somebody has a better solution?

thanks and good night

I believe the TreeTable only sees what is expanded, and the rest might not even have been loaded into memory depending on the underlying container. Iterating through the whole structure does eliminate any possible benefits of lazy loading - but this is only relevant if your container actually does load data lazily in a meaningful way.

You probably need to either expand the nodes to get their content or work directly with the underlying container and not the TreeTable (assuming you can do this easily with the container you are using).

Filtering does complicate matters somewhat if used.