SCSS for DataGrid

Hi there

I’m trying to set up custom styles for a Datagrid. I’ve started from the example given in the CUBA sampler.

So, I took exactly the same “style.scss file”. It put in what I believe it is the right location (the DataGrid is in Budget_editor), like it is done here: sampler/modules/web/src/com/haulmont/sampler/web/ui/components/datagrid/style at 7bbc71bd1372edf5c4a33a5c3f047877184a800b · cuba-platform/sampler · GitHub


I have inserted this code within the controller:
@Install(to = "itemsTable", subject = "rowStyleProvider")
protected String itemsTableRowStyleProvider(Item item) {
return "active-customer";

And … nothing happens. I’m trying to understand what I missed. I don’t know where and how I have to tell the app to load and use this scss file.

Help appreciated, thanks in advance.


Hi @olivier.choquet.

Your custom styles should be defined in styles.scss file located in the theme extension (or custom theme) directory:

In the CUBA example file style.scss is located there so that it can be shown in a separate tab when you view the sample.


1 Like

Hi Nadezhda
Thanks for posting an answer, it helps.
At the end your advice, plus a frantic use of the cache cleaning, almost resolved my issue.
The fact is, I’m trying to use it on a TreeDataGrid with a lot of code generated columns, and it looks that some properties (as background-color or even .vgrid{ …} are not well processed (which probable makes sense).

Here is a typical sample of what I do

private void addNameColumn(int position) {
        DataGrid.Column<Item> columnIcon = itemsTable.addGeneratedColumn("Name",
                new DataGrid.ColumnGenerator<Item, Component>() {
                    public Component getValue(DataGrid.ColumnGeneratorEvent<Item> event) {
                        if (itemsTable.getSelected().contains(event.getItem())) {
                            // edit mode
                            TextField<String> label = uiComponents.create(TextField.NAME);
                            label.addValueChangeListener(e -> {
                                SynchroBookEvent sbe = new SynchroBookEvent(this, event.getItem());
                            return label;
                        } else  {
                            // read mode
                            Label<String> label =uiComponents.create(Label.NAME);
                            return label;

                    public Class<Component> getType() {
                        return Component.class;
        columnIcon.setRenderer(new WebComponentRenderer<Item>());

Anyway, thanks for your support. Have a nice day.