Ngx-datatable: Customize selected row color

[mbeckenbach]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Selected column in single select mode is blue. Didn't find any css class to overwrite in DOM explorer.

Expected behavior
There should be a "selected" class on the datatable-body-row.

Reproduction of the problem
See current demo at http://swimlane.github.io/ngx-datatable/#single-selection

What is the motivation / use case for changing the behavior?
Customizing the css

• Table version: 0.8.x
  ^9.0.0

• Angular version: 2.0.x
  ^4.1.0

• Browser:
  All

• Language:
  CSS

[mbeckenbach]

Ok, found a selector, but this could be much shorter, couldn't it?

.ngx-datatable.material.single-selection .datatable-body-row.active, .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active, .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active, .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group

[amcdnl]

I'm open to PRs if you have some better ideas!

[mbeckenbach]

This is allways a cool answer. :-)

For the moment and without looking into your code as i don't have the time ´for that today:

Somewhere you set this classes, which can be pretty easy used to set a background color:
.datatable-row-even
.datatable-row-odd

Could this be the place where you can add a .datatable-row-selected class too?

[nicktobolski]

@amcdnl @mbeckenbach
What's the status with this? Any progress?

Even when using the enormously specific CSS selector above I wasn't able to change the BG color from the default blue. Suggested workarounds?

[Bidthedog]

Just ran into this myself. My use-case is that I essentially want to remove the added "active" class, but have the rest of the changes propagated. I tried the following:

.datatable-body-row.active {
background-color: inherit !important;
}

The CSS changes are applied, but unfortunately the inherited colour is still the same as it's set further up the chain. If I try to set a specific colour, it remains blue. I expect there's an animation going on somewhere?

[Bidthedog]

The following selector works in the latest version - this removes the colour entirely and uses the row-striping if it's turned on:

.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,
.ngx-datatable.material.multi-selection .datatable-body-row.active,
.ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active,
.ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group {
    background-color: inherit !important;
}
.ngx-datatable.material.single-selection .datatable-body-row.active:hover,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover,
.ngx-datatable.material.multi-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover,
.ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {
    background-color: inherit !important;
}

[Reshad-A]

The following selector worked for me.

:host /deep/ .datatable-body-row.active .datatable-row-group {
background-color: red !important;
}

I hope it helps.

[arunasSlenderis]

Thx @Bidthedog that helped. I just added #EEE color for hovered rows, cause inherit left white for me on hovers.

[tomasprieboj]

@Bidthedog Is it still working ?? Because my rows are still blue on click

[Bidthedog]

@tomasprieboj Still working for me, though I've not upgraded any packages recently.

[tomasprieboj]

@Bidthedog Not working for me then

[kevinding0218]

Hello, is there any progress on that? Currently I've tried all above but non of them works for me:(

[sabbynair]

Hi,
I am new to using the grid and I have a question. I know that by using rowClass, we can dynamically pick a class based on the state of the row. Can I do the same for selected rows also? In other words, I want the selected row styling to also be dynamic based on the state of the row like that of a normal row styling.

I also know that selected row styling can be set using that big css selected mentioned above. Can I combine the dynamic part of row styling and the styling of selected rows in some way, to get dynamic selected row styling?

My knowledge on CSS is very limited, so forgive me if this is a very basic question.

[drbgfc]

Just figured I'd share another solution of sorts I came up with:

// Use this if we want the original blue dark background on white text so it's readable .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell { color: unset; }

Also, I found @Bidthedog and @Reshad-A selectors worked for me if that's the solution people need. Although deep is deprecated, so I'd suggest the longer / more specific version to future-proof.

[james-poulose]

@Bidthedog Your selector did work for me, but i also came across this smaller one, which also seems to b working
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover, .ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group

Update: Apologies, just realized that this is not for selected, but for hover.

[seawave23]

Thx @Bidthedog :-) Strangely, that solution for me only works on Chrome

[Bidthedog]

Well, both angular, ngx-datatable AND all the browsers have moved on somewhat since I posted that, I wouldn't expect it to work forever :)

Not needed to customise the selected row colour for a fair few projects now, so can't advise further at the moment.

[BePo65]

As this issue is still open (and now hit me in a project) I made a small modification to the material.scss file that will make this "theme" more flexible. Using scss variables it is now possible to modify all colors / backgrounds that are defiend in this style sheet (not completly a theme picker but at least a bit more customizable than today :-). Might even be enough to kind of solve issue #1274.

The result can be seen on stackblitz (https://stackblitz.com/edit/angular-gk6hut).

I will create a pull request for this either.

[marjan-georgiev]

@BePo65's PR has been merged and will be released in 15.1.0.

[joaocarlosJC15]

.datatable-body-row.active {
background: red !important;
}

[tim-tx]

The pull request works for setting the background, but setting text color is not functional. See:
https://github.com/swimlane/ngx-datatable/pull/1747

[szymonlisiecki]

if anybody has still a problem with that use the solution @Reshad-A mentioned

:host /deep/ .datatable-body-row.active .datatable-row-group {
background-color: red !important;
}

but use :host ::ng-deep instad of /deep/ like this:

:host ::ng-deep .datatable-body-row.active .datatable-row-group {
  background-color: red !important;
  }