Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Grid sorting and multi-row headers
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 :
You can define the row to be used for sorting/displaying sort indicators by assigning a "default row" as follows:
grid.header.defaultRow = 0;
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.