Multiple styleClasses in PrimeNG

Question

How can I apply different styleclasses to a PrimeNG table?

I want a small table (p-datatable-sm) with gridlines (p-datatable-gridlines) and stripes (p-datatable-striped).

<p-table styleClass="p-datatable-sm">

Not sure how to set that with styleClass.

Answer 1

Sorry for late answer, but according to Sheldon's answer: the styleClass property is only an addition to the original classes of the component. And according to PrimeNG's docs: styleClass: string (accepts a single string) this leads us to use styleClass for every style we want to add. Sample:

<!--Component's HTML-->
 <p-table [value]="products" styleClass="p-datatable-sm" styleClass="custom">
    <ng-template pTemplate="caption">
        Small Table
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Category</th>
            <th>Quantity</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
        <tr>
            <td>{{product.code}}</td>
            <td>{{product.name}}</td>
            <td>{{product.category}}</td>
            <td>{{product.quantity}}</td>
        </tr>
    </ng-template>
</p-table>
// Component's CSS
  ::ng-deep .custom.p-datatable-tbody > tr > td {
     text-align: center; // centering content in body table
   }

  ::ng-deep .custom.p-datatable-thead > tr > th  {
     text-align: center; // centering content in head table
   }

NOTE: with this, we are overriding the current classes because CSS nature.

NOTE 2: the order matter, if you override font color in both styles (like the above sample) the last will be shown.

Answer 2

This worked for me:

<p-table styleClass="p-datatable-sm p-datatable-gridlines">