Custom styles for aggregation row in DataGrid

Support
#1

Hello,

I needed to apply special styles to some of the cells in the aggregation row of a DataGrid. Unfortunately, changing column styles does not affect it, and I couldn’t reach that specific row as there’s no public API to access it. Attempting to retrieve the FooterRow using the common API yields no results. However, upon further investigation, I discovered a field named footerAggregationRow in AbstractDataGrid, which contains the exact row I need. But, as there is no open API, currently, I see two possible approaches: extracting it using reflection or attempting to configure it through CSS by a relative path. However, the latter might break if I change the order of the columns, for example.

Could I have overlooked something? Is there a more high-level way to access that row?

Environment:
    Java Version: 17
    Jmix Version: 1.5.4
#2

Hello!

Yes, the aggregation row inside the DataGrid is not public API. To avoid using reflection, you can override component and the initAggregationRow() method. Here you can add CSS classes to the cells:

public class ExtDataGridImpl<E> extends DataGridImpl<E> {

    @Override
    protected void initAggregationRow() {
        super.initAggregationRow();

        if (!isAggregatable()) {
            return;
        }
        if (getAggregationPosition() != AggregationPosition.BOTTOM) {
            return;
        }

        for (Column<E> column : columns.values()) {
            if (column.getAggregation() != null) {
                com.vaadin.ui.components.grid.FooterCell footerCell = footerAggregationRow.getCell(column.getId());
                footerCell.setStyleName(column.getId());
                footerCell.setDescription(getColumnAggregationDescription(column));
            }
        }
    }
}

And you should register the component in order to replace the Jmix component in the whole application.

@Bean
public ComponentRegistration extDataGrid() {
    return ComponentRegistrationBuilder.create(DataGrid.NAME)
            .withComponentClass(ExtDataGridImpl.class)
            .build();
}

Then you can create more specific CSS selectors.

1 Like