Vaadin 23：调整Grid表头筛选组件的对齐方式

问题描述 #

我用以下代码实现Grid的表头筛选组件：

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);

当前表头显示效果：

我需要将前两个筛选组件上移，实现如下预期效果：

解决方案 #

方法1：统一容器结构 #

给前两个筛选组件也包裹无间距的VerticalLayout，让三列的容器布局保持一致，确保组件从顶部开始排列：

// 处理ID列
VerticalLayout idFilterLayout = new VerticalLayout();
idFilterLayout.setMargin(false);
idFilterLayout.setPadding(false);
idFilterLayout.setSpacing(false);
idFilterLayout.add(FilterUtils.createIdFilterHeader(dataViewFilter::setId, "user.id"));
headerRow.getCell(idColumn).setComponent(idFilterLayout);

// 处理Name列
VerticalLayout nameFilterLayout = new VerticalLayout();
nameFilterLayout.setMargin(false);
nameFilterLayout.setPadding(false);
nameFilterLayout.setSpacing(false);
nameFilterLayout.add(FilterUtils.createNameFilterHeader(dataViewFilter::setName, "user.first.name"));
headerRow.getCell(nameColumn).setComponent(nameFilterLayout);

// 原有Referrer列代码保持不变
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);

方法2：CSS强制顶部对齐 #

通过CSS调整表头单元格的垂直对齐方式，无需修改容器结构：

// 给ID列单元格设置样式
headerRow.getCell(idColumn).getElement().getStyle().set("align-items", "flex-start");
// 给Name列单元格设置样式
headerRow.getCell(nameColumn).getElement().getStyle().set("align-items", "flex-start");

也可以在全局CSS文件中统一配置：

vaadin-grid-header-cell {
  align-items: flex-start !important;
}

方法3：调整组件自身间距 #

如果FilterUtils创建的筛选组件自带默认margin/padding，直接修改组件的间距属性：

// 处理ID列
Component idFilter = FilterUtils.createIdFilterHeader(dataViewFilter::setId, "user.id");
idFilter.getElement().getStyle().set("margin-top", "0");
idFilter.getElement().getStyle().set("padding-top", "0");
headerRow.getCell(idColumn).setComponent(idFilter);

// 处理Name列
Component nameFilter = FilterUtils.createNameFilterHeader(dataViewFilter::setName, "user.first.name");
nameFilter.getElement().getStyle().set("margin-top", "0");
nameFilter.getElement().getStyle().set("padding-top", "0");
headerRow.getCell(nameColumn).setComponent(nameFilter);

内容的提问来源于stack exchange，提问作者alexanoid