angularsassprimengng-templatep-table

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

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

Solution

  • 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">

    See StackBlitz