PrimeNG datatable custom css

Question

I want to style the datatable header in my angular project. I am using PrimeNG components in my project. But I cannot style them. It doesn't override the styles.

I tried the solution of this primeNG - implement css style to dataTable, but it doesn't work for me.

I have a list-component and there is my datatable:

<p-dataTable #dt [value]="auftraege" [rows]="10" [paginator]="true" [(first)]="first" [sortMode]="multiple"
           [loading]="loading" loadingIcon="fa-spinner" class="beatDatatable">
<p-header>{{auftraege.length}} Aufträge</p-header>
<p-column field="cat" header="Datum/Uhrzeit" [sortable]="true">
  <ng-template pTemplate="body" let-order="rowData">
    {{order.cat | date:'yMdjm'}}
  </ng-template>
</p-column>
<p-column field="schadennummer" header="Schadennummer" [sortable]="true"></p-column>
<p-column field="kennzeichen" header="Kennzeichen" [sortable]="true"></p-column>
<p-column field="jobId" header="Euconnr." [sortable]="true"></p-column>
<p-column field="externeid" header="Auftragsnr." [sortable]="true"></p-column>
<p-column field="status.anzeige" header="Status" [sortable]="true"></p-column>
</p-dataTable>

My list-component.css doesn't override the styles. I want to change the color of the header for example. I copied the style out of the browser inspector too, but this didn't help too. I don't know how to change it. I tried a lot of things. Maybe someone knows.

I will posted my answer. this is the way to overwrite your table header styles try this hope this will be helpfull — Chandru, Oct 13 '17 at 12:51

score 4 · Accepted Answer · edited Dec 12 '19 at 08:01

Try something like this:

After adding CSS styles in list-component.css set the encapsulation in list-component.ts as ViewEncapsulation.None

@Component({
  selector: '<selector-name>',
  templateUrl: './list-component.html',
  styleUrls:['./list-component.css'],
  encapsulation : ViewEncapsulation.None
})

Also import

import ViewEncapsulation from '@angular/core'.

Also set the custom CSS style as !important mentioned by Chandru answer.

score 4 · Answer 2 · answered Oct 19 '17 at 03:07

When you want to override styles of third party modules, quite often you need to work around the view encapsulation Angular emulates. This can either be done as Zulu described or alternatively, if you do not want to disable view encapsulation for the entire component, you can use the shadow-piercing descendant combinator to target the particular class you want to style.

Add ::ng-deep to the end of the class you want to style. For example:

HTML

<p-dataTable class="some-custom-class-name">
    ...
</p-dataTable>

Style

.some-custom-class-name::ng-deep th {
    background-color: blue !important;
}

Read more about Shadow-Piercing Combinators here: The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop

score 1 · Answer 3 · answered Oct 13 '17 at 12:36

1

Try like this :

end of the line in your css file

p-datatable.beatDatatable .ui-datatable .ui-datatable-thead .ui-state-default {
    color: #000 !important;
    line-height: 2 !important;
    text-align: center !important;
}

answered Oct 13 '17 at 12:36

Chandru

10,864
6
38
53

score 0 · Answer 4 · answered Mar 22 '18 at 15:05

I have the same problem, and I find a way to do that, by personalizing the primeng component in the main style.css file. it's may be not the best good practice but it works. (and may be in a more propre way, you can create a scss/css filebeside your component using datatable, where you override the style, like data-table-override.scss for example and just import this file into your main style.scss using @import "components/my-component-using-datatable/data-table-override.scss"; and you can find the corresponding class name, just by analyzing the dom with your browser inspecting tool. And I suggest now that you use the new turbo table released by primeng, it's more customizable, and easier to use. hope this is helpfull for you :)

PrimeNG datatable custom css

4 Answers4