Vaadin是否具备类似HTML thead的表格表头功能？

你并没有遗漏Vaadin Grid的核心功能，它完全支持类似HTML <thead>的自定义表头逻辑，甚至能实现更灵活的表头结构，下面是具体实现思路：

1. 动态配置列生成不同表头 #

如果只是结构相似但表头文字、样式不同，直接通过代码动态创建列并设置表头即可：

// 假设你的数据实体是 CommonEntity
Grid<CommonEntity> grid = new Grid<>(CommonEntity.class);
// 清空默认生成的列，手动定义需要的列
grid.removeAllColumns();

// 动态添加列，设置不同表头
grid.addColumn(CommonEntity::getId).setHeader("用户ID");
grid.addColumn(CommonEntity::getName).setHeader("用户名称");

// 另一个结构相似的表格，换表头文字即可
Grid<CommonEntity> anotherGrid = new Grid<>(CommonEntity.class);
anotherGrid.removeAllColumns();
anotherGrid.addColumn(CommonEntity::getId).setHeader("编号");
anotherGrid.addColumn(CommonEntity::getName).setHeader("姓名");

2. 表头分组（对应HTML多层thead） #

如果需要像HTML里嵌套的thead结构（比如大表头下包含小表头），Vaadin Grid支持表头分组功能：

Grid<CommonEntity> grid = new Grid<>(CommonEntity.class);
grid.removeAllColumns();

// 创建基础列
Grid.Column<CommonEntity> idCol = grid.addColumn(CommonEntity::getId).setHeader("ID");
Grid.Column<CommonEntity> nameCol = grid.addColumn(CommonEntity::getName).setHeader("名称");
Grid.Column<CommonEntity> emailCol = grid.addColumn(CommonEntity::getEmail).setHeader("邮箱");
Grid.Column<CommonEntity> phoneCol = grid.addColumn(CommonEntity::getPhone).setHeader("电话");

// 生成上层分组表头，跨列包裹下层列
grid.appendHeaderRow().join(idCol, nameCol).setText("基础信息");
grid.appendHeaderRow().join(emailCol, phoneCol).setText("联系方式");

这样生成的表头结构和HTML多层thead的效果完全一致。

3. 自定义表头组件（复杂场景） #

如果需要更复杂的表头（比如带按钮、筛选输入框的表头），可以直接给列设置Vaadin组件作为表头：

// 用H3组件作为表头，也可以自定义包含输入框/按钮的Layout
grid.addColumn(CommonEntity::getCreateTime).setHeader(new H3("创建时间"));

更优的多表格分隔方案 #

如果要在同一页面展示多个结构相似的表格，比起用Label分隔，更推荐用Card或Panel组件包裹每个Grid，配合标题组件，让每个表格自带独立的标题栏，视觉效果更清晰：

VerticalLayout mainLayout = new VerticalLayout();

// 第一个表格带独立标题栏
Card userCard = new Card();
userCard.add(new H4("管理员视角用户列表"));
userCard.add(adminGrid);
mainLayout.add(userCard);

// 第二个表格带独立标题栏
Card guestCard = new Card();
guestCard.add(new H4("普通用户视角用户列表"));
guestCard.add(guestGrid);
mainLayout.add(guestCard);

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