Change background color of p-dataTable column heading

UI Components for Angular
Post Reply
qarshi
Posts: 6
Joined: 05 Aug 2016, 23:40

22 Feb 2017, 17:34

I am using p-dataTable and I want to change the default background colour of the column headings.

I've tried below but it changes the background colour of whole column.

Code: Select all

<p-dataTable [value]="account" >
  <p-column field="description" [sortable]="true" style="{'background':'#00b3ee'}">
    <template pTemplate="header">
      <span>Description</span>
    </template>
  </p-column>
</p-dataTable>
If I apply the inline style at the span level then only the background colour of the heading text is changed.

I have found the primeng class which I can modify to achieve what I want.

Code: Select all

.ui-datatable .ui-datatable-thead > tr > th {
    font-weight: normal; 
    background: aliceblue; 
}
Now the issue is I have many places in my application where I am using DataTable components but this custom style is to be applied to one of the DataTable components.

Is there some way to achieve this?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests