PrimeNG - How to change the style of pTemplate="caption" in p-table for a single component

Question

I'd like to change the background color of the caption cell of my p-table in only one component, how can I do?

I tried <ng-template pTemplate="caption" class="myStyle">

and .myStyle{ background: rgb(9,169,121) !important; } in my.component.scss

but it doesn't work.

Help me! Thanks!

Edit: Finally it works! I see the answer of @Antikhippe, but I had to add

:host ::ng-deep { #myTable {
.p-datatable-thead{ background: red;
} .p-datatable .p-datatable-thead > tr > th { background: inherit; } } }

The result is very bad, because the background of the whole "caption" cell is not colored, but only of a central row. Thanks anyway for the reply. — doinel, Nov 09 '20 at 08:40

score 2 · Accepted Answer · answered Nov 07 '20 at 08:23

2

pTemplate="caption" will only fit part of your table header, you have to work on p-datatable-header class:

Try this:

:host ::ng-deep {
  #myTable {
    .p-datatable-header {
      background-color: red;
    }
  }
}

I surrounded p-datatable-header class with #myTable to apply this CSS only for a table with myTable id:

<p-table id="myTable" [value]="products">

answered Nov 07 '20 at 08:23

Antikhippe

You can see it works in my [StackBlitz](https://stackblitz.com/edit/primeng-tablesections-demo-g9hcay?file=src%2Fapp%2Fapp.component.scss), have you added the `id` property to your table? – Antikhippe Nov 09 '20 at 08:39
I see that in your StackBlitz it works, but in my case it was not working. To what you told me I had to add .p-datatable .p-datatable-thead > tr > th { background: inherit; } – doinel Nov 17 '20 at 08:30

1 Answers1