如何在Vaadin 14中无需修改源码实现Grid自定义表头行显隐切换

Vaadin 14 Grid自定义表头行显隐可行方案 #

不需要Fork修改Grid官方源码，有两种轻量实现方案可选：

方案1：CSS类切换（推荐，保留表头组件状态） #

该方案完全基于公开API实现，无需触碰内部类，且切换显隐时表头内的输入框、下拉筛选等组件状态会完整保留：

1. 创建自定义表头行时，给该行绑定唯一标识类名：

// 自定义表头行实例记得保存为成员变量方便后续操作
HeaderRow customHeaderRow = grid.appendHeaderRow();
customHeaderRow.getElement().getClassList().add("custom-extended-header");

2. 在项目样式文件中添加对应控制样式：

/* 默认隐藏自定义表头 */
.custom-extended-header {
    display: none !important;
}
/* 给Grid添加该类时显示自定义表头 */
.grid-show-extended-header .custom-extended-header {
    display: table-row !important;
}

3. 切换按钮逻辑仅需控制Grid根元素的类名即可：

ToggleButton headerToggle = new ToggleButton("显示自定义表头");
headerToggle.addValueChangeListener(event -> {
    if (event.getValue()) {
        grid.getElement().getClassList().add("grid-show-extended-header");
    } else {
        grid.getElement().getClassList().remove("grid-show-extended-header");
    }
});

方案2：动态增删表头行（无多余DOM节点） #

如果不需要保留表头内的组件状态，可以直接调用Grid公开的表头增删API实现：

1. 提前把自定义表头的构建逻辑封装为独立方法，方便复用：

private HeaderRow buildCustomHeader(Grid<?> grid) {
    HeaderRow row = grid.appendHeaderRow();
    // 你的表头单元格填充逻辑，比如给每列加筛选组件
    for (Grid.Column<?> column : grid.getColumns()) {
        row.getCell(column).setComponent(new TextField("筛选" + column.getHeaderText()));
    }
    return row;
}

2. 切换逻辑直接操作表头行的增删：

// 成员变量存储当前显示的自定义表头行
private HeaderRow currentCustomHeader;

ToggleButton headerToggle = new ToggleButton("显示自定义表头");
headerToggle.addValueChangeListener(event -> {
    if (event.getValue()) {
        currentCustomHeader = buildCustomHeader(grid);
    } else {
        if (currentCustomHeader != null) {
            grid.removeHeaderRow(currentCustomHeader);
            currentCustomHeader = null;
        }
    }
});

避坑说明 #

之前你遇到的清空内容后仍占高度的问题，是因为仅操作了单元格子节点，没有修改表头行本身的渲染属性，上述两种方案都从行层面处理了显隐逻辑，不会残留空白高度。

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