Table style row background color takes precedence over selected style

Hi

I’m trying to style table rows depending on the value of a cell. Similar case to the one showcased in the sampler, except that the sample just change the font size, I’m changing color of the whole row.

.v-table {

        .blotter-warning {
            background-color: lightyellow;
        }

        .blotter-canceled {
            background-color: lightgray;
        }

        .blotter-done {
            background-color: lightgreen;
        }

        .blotter-in-progress {
            background-color: lightyellow;
        }
    }

Result:

image

Problem is that selected row is not displayed in blue as usual, because these rules override the v-selected one.

How can I make the coloring rules not apply on selected row ?

Regards
Michael

Hi,

Since you use GroupTable, styles are applied to each cell as well, so you need to provide more complex CSS. In your case the following should work:

.v-table {
  .blotter-warning:not(.v-selected) .v-table-cell-content {
    background-color: lightyellow;
  }
  ...
}

Regards,
Gleb

Hi @gorelov, it works great, thanks !