Can't join cells in Header row

[F43nd1r]

Trying to joing cells in the first header row results in

Cells cannot be joined on the first created header row. This row is used as the default row for setting column headers and for displaying sorting indicators, so each cell in it should have maximum one related column.

Trying to join cells in a second header row results in

Cells can be joined only on the top-most HeaderRow or the bottom-most FooterRow.

Expected functionality: Ability to join header cells (in the second header row).

If that is not possible, please fix the conflicting information.

vaadin/vaadin-grid-flow#446 is somewhat related.

[skitchin]

I have the same problem here with setHeader and setFooter as well. I had to create another setHeader or setFooter with blank contents for the joins to work.

[chrosim]

Seems like these are related: #1558

[stefanuebe]

I would even go a step further and say even in a single header row, it should be possible to join header cells.

Any columns affected by this span should be affected by any column related action (done by the user in the UI) as if I would do that on the respective columns themselves:

• sort: columns are sorted as if multi sort has been applied from left to right (or right to left on RTL orientation)
• reordering columns: the columns are placed into the new spot, keeping their internal order
• resize: columns are resized in the same ratio as they currently are

[avdhootu27]

https://vaadin.com/docs/v14/ds/components/grid#column-grouping

I hope this helps

[MarekChr]

@avdhootu27 There is requirement to have at least two header rows, which is a big limitation in my point of view.

[tomivirkki]

As a workaround, you might consider hiding the cells on the last header row and the first footer row with CSS:

vaadin-grid::part(last-header-row-cell) {
    display: none;
}

vaadin-grid::part(header-cell) {
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

vaadin-grid::part(first-footer-row-cell) {
    display: none;
}

https://github.com/vaadin/flow-components/assets/1222264/df0a8e29-9882-484c-ae0e-2ad88503479d

Source I used for the example grid:

var grid = new Grid<>();
var items = IntStream.range(0, 100).mapToObj(i -> "Item " + i).collect(Collectors.toList());
grid.setItems(items);

var col0 = grid.addColumn(item -> item).setHeader("Item");
var col2 = grid.addColumn(item -> item).setHeader("Item");
var col3 = grid.addColumn(item -> item).setHeader("Item");

var headerRow = grid.prependHeaderRow();
headerRow.join(col2, col3).setText("Joint header");
headerRow.getCell(col0).setText("Item");

grid.appendFooterRow();
var footerRow = grid.appendFooterRow();
footerRow.join(col2, col3).setText("Joint footer");
footerRow.getCell(col0).setText("Item");

add(grid);