Row fields in Vaadin Table or Grid columns

I have the entity as attached image file table1 where sales by date needs to be populated in a table or grid where the table column will represent date as per the attached image file: table2

thanks for any suggestions.

If I understand correctly, you want to add dates as columns, right? Check the
docs on Grid
on how to do that, especially the chapters “Binding to Data” and “Configuring Columns”.

Does that get you anywhere?

Thanks. Looked at those docs but not sure about it!
What I need is to bind one row of Grid with several records of the Entity i.e. each date column of the Grid will represent a record for the same customer if I take my example attached in my previous post. Any thoughts?

One option would be to use the TreeGrid that comes with 8.1 (not yet final, available as an add-on for 7 in the Directory) and another would be to use some kind of Details row pattern. Check the
wiki for some info about DetailsGenerator
- it’s for Vaadin 7, but the idea should still be the same in 8.


Looked at the treeGrid demo where the date is in column. But I need date in Columns and the numbers for the date and years in row.

Hmm. If I understand you correctly, it might be doable in
, maybe something like follows (hope you get the idea from the bad character art)

customer 2017-04-06 2017-04-07 2017-04-08 vA | 4000 - 5000 | 10000 - 1000 | - 1000 - vB | 2000 - - | - 3000 - but then you have to think about what is a a row exactly in this scenario. A collection of amouts with a list of dates as properties, I guess? You probably don’t want fixed dates as methods in your Row bean, but that could be dealt with by creating the columns with a suitable
. You could add totals on the top level row, too.

Hope this helps,


Hi Olli
That is exactly what I am looking for what you have drawn by character art. Can you provide more info about how can i get those dates as columns header from entity row?


grid.addColumn returns you a Column instance, which you can set a caption to. You can pass a ValueProvider to addColumn to return the correct date value for the row.

Should I use data provider or list here? How can I bind the value 1000, 3000 to column 2017-04-07 in your example, thanks for your further support

If you’re going to use a TreeGrid, you’ll have to use something that implements
. To add two values to a date, you’ll need to add two items to DataProvider (probably to two different parents) and the items should match the column’s ValueProvider so they return the wanted value there. So you could have a method like getValueForDate in the YourRowObject class. Define the column “2017-04-07” something like follows:

grid.addColumn((ValueProvider<YourRowObject, Object>) row -> row.getValueForDate("2017-04-07")); and for the row with 1000, return 1000 in that method, and so on.