Vaadin Grid Styling

When to use this skill

• When highlighting grid rows based on entity state (deleted, overdue, warning, etc.)
• When applying dynamic CSS classes to DataGrid rows
• When using conditional row styling in Jmix/Vaadin views
• When working with Shadow DOM styling for Vaadin components

Instructions

Key Concept: Shadow DOM

Vaadin Grid uses Shadow DOM, which means regular CSS selectors don't work. You must use:

• Java: setPartNameGenerator() (NOT setClassNameGenerator())
• CSS: ::part() selectors

Java Implementation

In your view controller, use setPartNameGenerator() to assign part names based on entity data:

@Subscribe
public void onInit(final InitEvent event) {
    dataGrid.setPartNameGenerator(entity -> {
        if (entity.getDeletedDate() != null) {
            return "deleted-row";
        }
        if (entity.isOverdue()) {
            return "overdue-row";
        }
        if (entity.needsAttention()) {
            return "warning-row";
        }
        return null;  // No special styling
    });
}

CSS Implementation

Add styles to frontend/themes/sm/styles.css using ::part() selectors:

/* Deleted/inactive rows - faded appearance */
vaadin-grid::part(deleted-row) {
    opacity: 0.5;
    background: var(--lumo-contrast-10pct);
}

/* Overdue/error rows - red highlight */
vaadin-grid::part(overdue-row) {
    background: linear-gradient(
        var(--lumo-error-color-10pct),
        var(--lumo-error-color-10pct)
    ) var(--lumo-base-color);
}

/* Warning rows - yellow highlight */
vaadin-grid::part(warning-row) {
    background: linear-gradient(
        var(--lumo-warning-color-10pct),
        var(--lumo-warning-color-10pct)
    ) var(--lumo-base-color);
}

/* Success/good rows - green highlight */
vaadin-grid::part(success-row) {
    background: linear-gradient(
        var(--lumo-success-color-10pct),
        var(--lumo-success-color-10pct)
    ) var(--lumo-base-color);
}

Common Mistakes to Avoid

1. Wrong method: Using setClassNameGenerator() instead of setPartNameGenerator()
2. Wrong CSS selector: Using .class-name instead of ::part(part-name)
3. Wrong CSS target: Using tr.class-name or other regular selectors

Column-Specific Styling

For individual columns, use setPartNameGenerator() on the column:

grid.addColumn(Entity::getRating)
    .setHeader("Rating")
    .setPartNameGenerator(entity -> "font-weight-bold");

vaadin-grid::part(font-weight-bold) {
    font-weight: bold;
}