Vaadin 24 Grid同时实现排序与内联过滤时如何显示排序箭头？

问题：为Vaadin 24的Grid添加内联过滤后，原本的排序箭头消失了，如何恢复？

原因：当通过HeaderRow或直接为列表头设置自定义组件时，默认的排序指示器（箭头）会被自定义组件替换，因此需要手动将排序指示器整合到自定义表头布局中，并绑定排序状态与触发逻辑。

具体修改方案 #

修改你的createFilterHeader方法，加入GridSortIndicator组件——这是Vaadin内置的排序指示器组件，既能显示列名，又能展示排序箭头并响应排序操作：

// 修改方法，增加Grid.Column参数以绑定排序状态
private static Component createFilterHeader(Grid.Column<?> column, String labelText,
        Consumer<String> filterChangeConsumer) {
    // 替换原Label为GridSortIndicator，保留列名同时显示排序箭头
    GridSortIndicator sortIndicator = new GridSortIndicator();
    sortIndicator.setLabel(labelText);
    // 初始化排序方向
    sortIndicator.setSortDirection(column.getSortDirection());
    // 监听列排序变化，同步更新指示器状态
    column.addSortListener(e -> sortIndicator.setSortDirection(e.getSortDirection()));
    // 点击指示器触发列排序
    sortIndicator.addClickListener(e -> column.sort());

    TextField textField = new TextField();
    textField.setValueChangeMode(ValueChangeMode.EAGER);
    textField.setClearButtonVisible(true);
    textField.addThemeVariants(TextFieldVariant.LUMO_SMALL);
    textField.setWidthFull();
    textField.getStyle().set("max-width", "100%");
    textField.addValueChangeListener(
            e -> filterChangeConsumer.accept(e.getValue()));

    VerticalLayout layout = new VerticalLayout(sortIndicator, textField);
    layout.getThemeList().clear();
    layout.getThemeList().add("spacing-xs");

    return layout;
}

调用修改后的方法 #

在设置表头组件时，传入对应的列对象：

grid.getHeaderRows().clear();
HeaderRow headerRow = grid.appendHeaderRow();

// 传入列对象到createFilterHeader
headerRow.getCell(nameColumn).setComponent(
        createFilterHeader(nameColumn, "Name", personFilter::setFullName));
headerRow.getCell(emailColumn).setComponent(
        createFilterHeader(emailColumn, "Email", personFilter::setEmail));
headerRow.getCell(professionColumn).setComponent(
        createFilterHeader(professionColumn, "Profession", personFilter::setProfession));

可选：将过滤框与排序箭头放在同一行 #

如果希望过滤框和排序箭头在同一表头行显示，可改用HorizontalLayout组织组件：

private static Component createInlineFilterHeader(Grid.Column<?> column, String labelText,
        Consumer<String> filterChangeConsumer) {
    GridSortIndicator sortIndicator = new GridSortIndicator();
    sortIndicator.setLabel(labelText);
    sortIndicator.setSortDirection(column.getSortDirection());
    column.addSortListener(e -> sortIndicator.setSortDirection(e.getSortDirection()));
    sortIndicator.addClickListener(e -> column.sort());

    TextField textField = new TextField();
    textField.setValueChangeMode(ValueChangeMode.EAGER);
    textField.setClearButtonVisible(true);
    textField.addThemeVariants(TextFieldVariant.LUMO_SMALL);
    textField.setWidth("140px");

    HorizontalLayout layout = new HorizontalLayout(sortIndicator, textField);
    layout.setSpacing(true);
    layout.setAlignItems(FlexComponent.Alignment.CENTER);
    layout.setWidthFull();
    layout.expand(sortIndicator);

    textField.addValueChangeListener(e -> filterChangeConsumer.accept(e.getValue()));

    return layout;
}

调用时直接设置列的表头：

nameColumn.setHeader(createInlineFilterHeader(nameColumn, "Name", personFilter::setFullName));
emailColumn.setHeader(createInlineFilterHeader(emailColumn, "Email", personFilter::setEmail));
professionColumn.setHeader(createInlineFilterHeader(professionColumn, "Profession", personFilter::setProfession));

内容的提问来源于stack exchange，提问作者Sogawa-sps