CODEWITHSUNDEEP
cssangulardatatableprimeng
Anton Styopin
Anton Styopin

Reputation: 753

PrimeNG datatable custom css

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.

Upvotes: 4

Views: 25011

Answers (5)

Oranit Dar
Oranit Dar

Reputation: 1717

PrimeNg provides the property tableStyle

<p-table [columns]="columns" [value]="arrData" [tableStyle]="{ 'border' : 'solid' }"></p-table>

However I prefer using css

p-table .p-datatable .p-datatable-table{
  border: solid;
}

Upvotes: 0

zulu
zulu

Reputation: 298

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.

Upvotes: 5

getName
getName

Reputation: 733

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 :)

Upvotes: 1

Michael Burford
Michael Burford

Reputation: 71

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

Upvotes: 4

Chandru
Chandru

Reputation: 11184

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

Upvotes: 1

Related Questions