vaadin-grid-styling

TorbenMerrald's avatarfrom TorbenMerrald

Dynamically style Vaadin Grid/DataGrid rows based on entity data. Use this skill when highlighting rows based on conditions (e.g., deleted, overdue, warning states). Use this skill when applying custom CSS to grid rows. Use this skill when working with setPartNameGenerator and ::part() CSS selectors.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 9, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill enables developers to implement dynamic, data-driven styling for Vaadin Grid and DataGrid components. It specifically addresses the complexities of Shadow DOM styling by providing precise implementation patterns for Java's setPartNameGenerator and CSS ::part() selectors, allowing for conditional row highlighting based on entity states like 'overdue', 'deleted', or 'warning'.

Use Cases

  • Visualizing record status: Automatically highlighting overdue tasks, expired contracts, or critical errors in a data table using color-coded backgrounds.
  • Data state indication: Applying faded opacity or grayscale styles to rows representing deleted, inactive, or archived entities for better visual hierarchy.
  • Conditional formatting: Dynamically bolding or coloring specific columns (e.g., high-priority ratings) based on backend business logic.
  • Shadow DOM styling: Overcoming standard CSS limitations in Vaadin/Jmix applications to apply custom themes to internal component parts.
nameVaadin Grid Styling
descriptionDynamically style Vaadin Grid/DataGrid rows based on entity data. Use this skill when highlighting rows based on conditions (e.g., deleted, overdue, warning states). Use this skill when applying custom CSS to grid rows. Use this skill when working with setPartNameGenerator and ::part() CSS selectors.

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;
}