How to change ngx datatable header background color?

Question

i want to set the table header background to blue color.

this is my html:

<ngx-datatable class="material"  [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
    [rowHeight]="'auto'" ngClass="{'table-striped': false}">
    <ngx-datatable-column name="ID RECLAMO" prop="idReclamo" class="bg-dark"></ngx-datatable-column>
    <ngx-datatable-column name="SEGNALTO" prop="dataSegnalizione">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{ row.dataSegnalizione | date:'dd/MM/yyyy' }}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="PRESO IN CARICO IL" prop="dataPresoInCarico">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{ row.dataChiusura | date:'dd/MM/yyyy' }}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="CHIUSO IL" prop="dataChiusura">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{ row.dataPresoInCarico | date:'dd/MM/yyyy' }}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="NEGOZIO" prop="codiceNegozio"></ngx-datatable-column>
    <ngx-datatable-column name="MANAGER" prop="manager"></ngx-datatable-column>
    <ngx-datatable-column name="CLIENTE" prop="cliente"></ngx-datatable-column>
    <ngx-datatable-column name="STATO" prop="stato"></ngx-datatable-column>
    <ngx-datatable-column name="GESTIONE" prop="gestione"></ngx-datatable-column>
    <ngx-datatable-column name="CAUSALE RECLAMO" prop="causaleReclamo"></ngx-datatable-column>
    <ngx-datatable-column name="SODDISFAZIONE" prop="soddisfazione"></ngx-datatable-column> </ngx-datatable>

i tried forcing it using "deep" "host" but without a result.

Answer 1

Try the below CSS

  .ngx-datatable ::ng-deep .datatable-header-inner{
    background-color: blue !important;
  }
  .ngx-datatable ::ng-deep .datatable-header-inner .datatable-header-cell-label,
  .ngx-datatable ::ng-deep .datatable-header-inner .sort-btn{
    color: white !important;
  }

Stackblitz Demo

Answer 2

If you use css, you need to add following styles in your css file.

/deep/ .ngx-datatable .datatable-header {
  background-color: blue;
}

And if you use scss, you need to add following styles in your scss file.

::ng-deep {
  .ngx-datatable {
    &.datatable-header {
      background-color: red;
    }
  }
}

Please check this stackblitz.

Best Regards.

Answer 3

You can inject ViewEncapsulation.None option in your component to control how the encapsulation is applied.

Thus, with this option you can control ngx-datatable host which means that any styles specified for this component. And without using !important in your style ;)

Exemple:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})....

// scss

my-app {
  .ngx-datatable .datatable-header-inner {
    background-color: blue;
  }
}