Vaadin 24.3.5 Grid添加两个ComponentColumn仅第二个显示问题

问题原因 #

出现这个情况通常有两个核心原因：

• 列宽度未设置：布局引擎自动调整时，第一列被挤压至完全不可见
• 列唯一标识缺失：Vaadin内部对列的标识出现冲突，导致第一列未被正确渲染

解决方案 #

给每列添加唯一键并设置固定宽度，修改后的代码如下：

Grid<String> grid = new Grid<>(String.class, false);

// 姓名列：设置唯一键和宽度
grid.addComponentColumn(value -> new TextField(value))
    .setHeader("Name")
    .setKey("name-column")
    .setWidth("150px");

// 姓氏列：设置唯一键和宽度
grid.addComponentColumn(value -> new TextField(value))
    .setHeader("Surname")
    .setKey("surname-column")
    .setWidth("150px");

grid.setItems(Arrays.asList("Mickey", "John"));
// 必须将Grid添加到页面布局中，例如：
// add(grid);

说明 #

• 设置setKey能让Vaadin准确区分不同列，避免内部逻辑冲突
• 显式设置setWidth可以防止列被布局挤压消失
• 最后要确保Grid已通过add(grid)或类似方法加入到页面的组件树中，否则所有列都无法显示

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