Grid sorting and multi-row headers

Flow
1

Hi,
I want to make a grid sortable with a line of header containing combo-boxes to filter content :

<vaadin-grid id="blah" selection-mode="single" size="1000">
<table>
<colgroup>
<col name="id" sortable="">
<col name="gamme" sortable="">
[...]

</colgroup>
<thead>
<tr>
<th>#</th>
<th>Gamme</th>
[...]

</tr>
<tr>
<th></th>
<th><vaadin-combo-box name="gammes" id="gammes" label="Filtre" item-label-path="txt" item-value-path="id"></vaadin-combo-box></th>
[...]

</tr>
[...]

But the row used to trigger (and display) the sorting event is the 2nd one, clicking on the combo-box sort the grid and clicking on the header name has no effect.
Is there a way to make the first (and only the first) row trigger the event ?

If I put the combo-box on the 2nd row I get this, which is annoying :

If I put it on the 1st row I get this the sort indicator and trigger are on the header names row :

2

You can define the row to be used for sorting/displaying sort indicators by assigning a “default row” as follows:

grid.header.defaultRow = 0;
3

Thanks Tomi, that should indeed fix the issue. Currently there’s no way to define the default header row declaratively, so you have to use the JavaScript API for it.