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

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

<ngx-datatable id =“ngxdatatable” 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.

[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