css Question posted in
Some basic documentation can be found here.

Css – How to change ngx datatable header background color?

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search