Tree CRUD

Hi Everyone!

I’m rather new to Vaadin and Web Dev as a whole, currently I’m trying my hand at a small project for managing the Stock of different products, as well as sales. Products tend to come in one model, with various different “Team Brands” on them, meaning I’d need to have the functionality of a Tree Grid (Main Row for Products, which collapse into all the different brands available for it) with the functionality of a CRUD (Ease of Editing).
Can this be done? If so, should I start by modifying a Tree Grid or should I start by modifying a CRUD Component?

I’ve done some light work with the framework and it seems easy to work with, but making Custom Components seems a little daunting at the moment, and I don’t really know where to start with this task.

Details:
→ I’m using Vaadin v24
→ I’m using Spring Boot
→ I have access to the Student Pack
→ I’m using Kotlin (For the time being, it was pretty easy to make it work despite the language differences)

Thanks in Advance!

We are using a customized Version of GridPro as a TreeGrid with inline editing. The only thing you have to build yourself is the Tree toggling logic and adding/removing of items below the toggled item. It’s quite straight forward if you use a generalized DTO as starting point and use the underlying Dataprovider API to access the items.

On the other hand, if you don’t need inline editing. Just go with a TreeGrid and add an edit button on the right.

Thank you!

I assumed there had to be a way to unite the two functionalities, but I figured it was worth asking before tangling myself up.