Grid prependHeaderRow() not working as expected

I am new to vaadin and i try to create a grid looking like this:

			| Header1    | Header 2  | Header 3  | Header 4    |
Col1 | Col2 | Col3 | Col4| Col5| Col6| Col7| Col8| Col9 | Col1 |

i am using
grid.prependHeaderRow().join(col3, col4)
grid.prependHeaderRow().join(col5, col6)
grid.prependHeaderRow().join(col7, col8)
grid.prependHeaderRow().join(col9, col10)

But it end with a grid that looks like this:

|		                                               Header 4 |
|                                         Header 3              |
|                           Header 2                            |
|               Header1                                         | 
Col1 | Col2 | Col3 | Col4| Col5| Col6| Col7| Col8| Col9 | Col10 |

Not sure what i did wrong since this is how it was described in the tutorial https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid.html#grouping-columns

Hi,

the method works as described in the JavaDocs: https://vaadin.com/api/platform/14.0.13/com/vaadin/flow/component/grid/Grid.html#prependHeaderRow--

public HeaderRow prependHeaderRow()
Adds a new header row on the top of the existing header rows.

If there are no existing header rows, this will create the first row.

Returns: the created header row

So instead of calling prependHeaderRow multiple times, you should call .join multiple times on the one HeaderRow object.