Change color of only one cell in a grid

Flow
1

Hey Everyone,

I am display different values in a grid. Now as the user can change values over an input-dialog, I’d like to highlight the changes in the grid. How do I access a specific cell in grid to change the color of this cell?

Best regards,
Patrick

2

Hello!

The Grid component has a feature to generate CSS class names for the cells. Its usage depends on if you are a frontend or Java developer.

If you are using the client-side web component, you use this feature by implementing the cellClassNameGenerator function, which takes the column and row data as parameters, and returns the class names to be applied based on them. After the conditions change, you can update the class names by calling the generateCellClassNames function. See the demo at https://vaadin.com/components/vaadin-grid/html-examples/grid-styling-demos.

If you are a Java developer, you can use this feature with the setClassNameGenerator methods. They take a function as an argument, which returns a class name based on the Java bean on that row. grid.setClassNameGenerator generates the class name for the full row. column.setClassNameGenerator generates the class name for the cells on that column, allowing to target individual cells. Unfortunately I can’t find a demo for this now, but you can see its usage eg. [here]
(https://github.com/vaadin/vaadin-grid-flow/blob/4c622c12f5910529ad37a2ce6d31b02c6cab5d2b/vaadin-grid-flow-integration-tests/src/main/java/com/vaadin/flow/component/grid/it/GridView.java#L1665-L1669).
To create the class names, you need to add a style-module in an HTML-file, [such as here]
(https://github.com/vaadin/vaadin-grid-flow/blob/4c622c12f5910529ad37a2ce6d31b02c6cab5d2b/vaadin-grid-flow-demo/src/main/resources/META-INF/resources/frontend/grid-demo-styles.html#L17-L29), and import it with the @HtmlImport annotation.

3

Perfect. Thanks a lot.