Displaying multilevel hierarchy in Vaadin 23 grid - accordion

Question

I need to display a list of books in the online library matching the search criteria. I do get this list from the web service and it can contain couple thousands of items. They are historical novels and sorted by the year the novel describes and here is the bean code:
#JsonTypeInfo(use = JsonTypeInfo.Id.DEDUCTION, defaultImpl = Book.class)
#JsonSubTypes(#JsonSubTypes.Type(value = Series.class))
public class Book implements Serializable {
private static final long serialVersionUID = 1L;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String bookId;
#JsonInclude(JsonInclude.Include.NON_NULL)
private List<Author> authors;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String title;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String url;
#JsonInclude(JsonInclude.Include.NON_NULL)
private Date publishedOn;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String isbn;
#JsonIgnore
private Date addedOn;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String addedBy;
#JsonIgnore
private Date updatedOn;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String status;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String annotation;
#JsonInclude(JsonInclude.Include.NON_NULL)
private Integer year;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String country;
#JsonInclude(JsonInclude.Include.NON_NULL)
private byte[] highlight;
#JsonInclude(JsonInclude.Include.NON_NULL)
private String commentary;
#JsonInclude(JsonInclude.Include.NON_NULL)
private Short rating;
#JsonInclude(JsonInclude.Include.NON_NULL)
private Short seriasVolNum;
#JsonInclude(JsonInclude.Include.NON_NULL)
private List<String> tags;
#JsonInclude(JsonInclude.Include.NON_NULL)
private Book seriesId;
#JsonInclude(JsonInclude.Include.NON_NULL)
private List<ReadersReview> readersReviews;
// Setters and getters
}
Information is pretty lengthy and cannot be displayed in a simple grid. It need to be organized in several rows and some of them should be collapsible in several layers. I want it to look like following:
First I was thinking about using TreeGrid, but doesn't look it will work. From what I have read in the documentation, there should be items of the same class. Now I am thinking about using combination of grid and accordion, but not sure. Especially, because some fields shall be editable. I.e. user who left his book review, shall be able to edit it or remove it. I definitely can use a good advice. Please give it to me.

Answer 1

I think what #jouni is suggesting in his comment on your posting is using the Grid's Item Details (which you can find information on in the Grid's documentation under Item Details). You implement that via the Grid's setItemDetailsRenderer method. What that will do is cause a click on an item row to display whatever details you want to see for that item. If your book details must have multiple sections, you could use the "Details" component as your example image shows (or perhaps better would be a tabbed display so the user does not have to always click twice to see any details). The details will span the full width of the Grid below the item row. There can be only one details rendering per item and details will only be shown for one item row at a time, so if that's a problem, Grid Item Details won't work for you.
Alternatively, attempting to use a Details component in an item row as you have shown, probably will not work as you want, because your example image shows the details spanning columns, which is not possible in an item row. What you would have to do in that instance is have a Grid of just two columns—"Year" and "Book"—and the Book column would be a custom renderer of the entire book item: Authors, Title, Status, and Rating with each of the Details below.
Another option would be to use a Virtual List. This allows you to create arbitrary item rows. The drawback with this component is you don't have distinct columns with headers, but if your Grid only has two columns, then (as suggested in the previous paragraph), then you haven't lost much.
If you want to expand/collapse years and books, you could have a Virtual List of Details for each year, and inside each of those Details have another Virtual List of Details for each book.