Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Grid sorting and multi-row headers
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;