ngx-datatable css styling for mouse hover

Question

I'm using ngx-datatable with the bootstrap theme. I can't find or figure out how to change the styling for when the mouse is hovered over a cells?. In this example it goes grey

http://swimlane.github.io/ngx-datatable/#css

I've been able to change the activation colour like this, just can't figure out the hover colour.

::ng-deep .ngx-datatable.bootstrap .datatable-body .datatable-body-
row.active {
  background-color: #006eff;
  color: #FFF;
}

@C.Schubert , thanks, its working great :-) – Tim Tharratt Feb 17 '18 at 12:39 — Tim Tharratt, Feb 17 '18 at 12:39
Nice! Could you mark my answer as answer. – C.Schubert Feb 17 '18 at 12:40 — C.Schubert, Feb 17 '18 at 12:40

score 15 · Accepted Answer · edited Jul 12 '18 at 11:03

15

.ngx-datatable.bootstrap:not(.cell-selection) .datatable-body-row:hover,
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group
{ 
   background: red;
}

This works.

edited Jul 12 '18 at 11:03

Ted Nyberg

7,001
7
41
72

answered Feb 17 '18 at 12:12

C.Schubert

2,034
16
20

copy and paste this doesn't work for me :( is there any variable I need to be aware of please? – AkiZukiLenn Jan 09 '23 at 09:37

BartusZak · Answer 2 · 2018-11-27T17:21:45.030

3

 :host
  ::ng-deep
  .ngx-datatable.bootstrap:not(.cell-selection)
  .datatable-body-row:hover,
:host
  ::ng-deep
  .ngx-datatable.material:not(.cell-selection)
  .datatable-body-row:hover
  .datatable-row-group {
  background: red;
}

I had to add

    :host
  ::ng-deep

and then it stared working.

You can change other default styles because there is a linear translation:

:host
  ::ng-deep
  .ngx-datatable.material:not(.cell-selection)
  .datatable-body-row:hover {
  background-color: #007bff2e;
}

edited Nov 27 '18 at 17:21

answered Nov 27 '18 at 17:16

BartusZak

1,041
14
21

how can i apply similar for selected ? the example they have for selected does not work fo rme ! – kuldeep Oct 26 '20 at 15:42

ngx-datatable css styling for mouse hover

2 Answers2