Ngx-datatable: I am unable to set Header cell style for ngx-datatable

[shankar1414k]

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

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

Current behavior

unable to set Header style for ngx-datatable
.datatable-header-cell{
color :green
}

HTML

class='material'

      [rows]="rows" 
      [rowHeight]="20"
      [columns]="columns" 
      [columnMode]="'force'" 
      [scrollbarV]="true"
      [scrollbarH]="true"
      [headerHeight]="30"
      [footerHeight]="50"
      [limit]="35"
      (page)="onPage($event)">

    </ngx-datatable>

but still style is not applied, data table still showing with default style color.

Please Help.

[andreykaipov]

Angular's default view encapsulation for components is Emulated to mimic a shadow DOM behavior effectively scoping a component's CSS within that component only.

To get around this, you could place that CSS into your global styles. Alternatively, you can use the :host and /deep/ selectors provided by Angular to style the ngx-datatable, or just change your component's view encapsulation to ViewEncapsulation.None. See https://angular.io/guide/component-styles for more details.

You might have to be more specific with that selector though. Something like

.ngx-datatable.material {
  .datatable-header {
    .datatable-header-cell {
      // your styles here
    }
  }
}

should work after getting around the view encapsulation.

[amcdnl]

Please try what @andreykaipov suggested.

[dev2js]

I had a problem adding styles to the table. I added below in my component
@Component({
....
encapsulation: ViewEncapsulation.None,
})
this takes my custom styling files

[Wihan]

Thanks for this, maybe this should be somewhere in the documentation, had the exact same problem. Moving my component styles to the global styles solved the problem.

[tonym99]

Any idea why I get "Cannot find name 'ViewEncapsulation'" when adding encapsulation: ViewEncapsulation.None? I'm new to ngx-datatable coding.

[Nyantahi]

Hi @tonym99 ,
You have to import it first before using it

import { ViewEncapsulation } from '@angular/core';

[tonym99]

Thanks!

Sent from my iPhone

On Nov 13, 2017, at 11:36 AM, Andrew Rutazamba [e-mail] wrote:

Hi @tonym99 ,
You have to import it first before using it

import { ViewEncapsulation } from '';

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Drodarious]

I would use caution when dealing with ViewEncapsulation.

The setting of encapsulation: ViewEncapsulation.None will make it so that your component CSS is no longer restricted to confines of that component. i.e. It will essentially make your CSS global. This can lead to some very tricky CSS bugs and overuse negates the reason you are using a framework in the first place. Try to leverage CSS specificity as mentioned above.

[james-poulose]

Angular's default view encapsulation for components is Emulated to mimic a shadow DOM behavior effectively scoping a component's CSS within that component only.

To get around this, you could place that CSS into your global styles. Alternatively, you can use the :host and /deep/ selectors provided by Angular to style the ngx-datatable, or just change your component's view encapsulation to ViewEncapsulation.None. See https://angular.io/guide/component-styles for more details.

You might have to be more specific with that selector though. Something like

.ngx-datatable.material {
  .datatable-header {
    .datatable-header-cell {
      // your styles here
    }
  }
}

should work after getting around the view encapsulation.

Adding encapsulation: ViewEncapsulation.None did the trick!
I am not going to get back my 1 hour back - but that solved many of my problems such as

1. Font color
2. Font size
3. Grid's padding
4. Grid's margin
5. all the above issues for the footer

Thanks a lot!