vaadinvaadin-flowvaadin-gridvaadin23

Vaadin 23 align components in Grid header for filtering

This is the code I have for Grid filtering components:

headerRow.getCell(idColumn).setComponent(FilterUtils.createIdFilterHeader(dataViewFilter::setId, "user.id"));
headerRow.getCell(nameColumn).setComponent(FilterUtils.createNameFilterHeader(dataViewFilter::setName, "user.first.name"));

VerticalLayout referrerFilterVerticalLayout = new VerticalLayout();
referrerFilterVerticalLayout.setMargin(false);
referrerFilterVerticalLayout.setPadding(false);
referrerFilterVerticalLayout.setSpacing(false);

referrerFilterVerticalLayout.add(FilterUtils.createIdFilterHeader(dataViewFilter::setReferrerId, "referrer.id"));
referrerFilterVerticalLayout.add(FilterUtils.createNameFilterHeader(dataViewFilter::setReferrerName, "referrer.first.name"));

headerRow.getCell(referredByColumn).setComponent(referrerFilterVerticalLayout);

Right now the header looks like:

enter image description here

I need to adjust the first two components and move them up to get something like this:

enter image description here

Please show how to achieve this.

Solution

  • Probably the easiest thing would be to stick your filter boxes in two Horizontal Layouts, within the Vertical Layout.