What is the process for updating the background color of the header in ngx datatable?

Question

What is the process for updating the background color of the header in ngx datatable?

I am looking to change the background color of the table header to blue.

This is the HTML code I have:

<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 attempted to do it by using "deep" and "host" but did not achieve the desired outcome.

css angular ngx-bootstrap scss-mixins ngx-datatable

Answer 1

Answer №1

Check out this CSS code snippet:

  .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;
  }

View the Stackblitz Demo here

Answer 2

Check out this CSS code snippet:

  .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;
  }

View the Stackblitz Demo here

Answer 3

Answer №2

If you are working with css, make sure to include the following styles in your css file.

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

But if you prefer using scss, then you should add these styles in your scss file instead.

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

To see a live example, check out this StackBlitz.

Thank you and best regards.

Answer 4

If you are working with css, make sure to include the following styles in your css file.

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

But if you prefer using scss, then you should add these styles in your scss file instead.

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

To see a live example, check out this StackBlitz.

Thank you and best regards.

Answer 5

Answer №3

To have control over the encapsulation in your component, you can use the ViewEncapsulation.None option. This allows you to manage the styles for the ngx-datatable host without the need for using !important in your CSS.

For example:

@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;
  }
}

Answer 6

To have control over the encapsulation in your component, you can use the ViewEncapsulation.None option. This allows you to manage the styles for the ngx-datatable host without the need for using !important in your CSS.

For example:

@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;
  }
}

What is the process for updating the background color of the header in ngx datatable?

Answer №1

Answer №2

Answer №3

Similar questions

on clicking GTM, obtain a different child element

Display full desktop version on mobile devices with minimized view and no need for horizontal scrolling

The scrolling speed of my news div is currently slow, and I am looking to increase its

How to perfectly align responsive email on iPhone 6

The slider's border-radius is not being maintained as it moves from left to right

Error: setPosition function only accepts values of type LatLng or LatLngLiteral. The property 'lat' must be a numerical value in agm-core agm-overlay

Apply a CSS class to the selected radio button when retrieving row data from the table

Ways to store data in the localStorage directly from a server

The program encountered an issue: it cannot access the property 'invalid' because it is undefined

TypeScript encounters difficulty locating the div element

Page cannot be adjusted to fit the viewport

Need help with styling for disabled autocomplete? Check out the attached image

Observable emitting individual characters instead of the entire string in an optional parameter of an activated route

What steps should be followed in order to replicate the border design shown in the

Replace the pixel measurements with percentage values

What is the best way to enable `child_process.execFile` to utilize an existing running application?

Issue with border styling in Material-UI vertical ToggleButtonGroup

Increase the size of the NativeScript switch component

Leveraging the power of Angular4 to dynamically iterate through SVG elements with the

The `@ViewChild` reference cannot be found