PrimeNG Angular Table

Question

I want to do some changes in my , like:

1. Change the fontsize
2. Change the button's collors and sizes
3. Change the size of modal

How can I do that? I'm currently using :host ::ng-deep to these elements but i'm no capable to change these things that I mentioned.

SCSS:

.card {
    margin: 15px;
    border: #e4e4e4 1px solid;
    padding: 15px;
}

/* Estilos para as linhas do cabeçalho */
:host ::ng-deep .p-datatable-thead>tr {
    border-top: #e4e4e4 1px solid;
}

/* Estilos para as linhas do corpo */
:host ::ng-deep .p-datatable-tbody>tr {
    border-top: #e4e4e4 1px solid;
    border-bottom: #e4e4e4 1px solid;
}

/* Hover para as linhas do corpo */
:host ::ng-deep .p-datatable-tbody>tr:hover {
    background-color: #e4e4e4;
}

::ng-deep .p-column-filter-menu {
    font-size: 12px !important;
}

HTML:

<div class="card">
    <p-table [value]="dados" styleClass="p-datatable-gridlines p-datatable-striped" dataKey="id" [rows]="3"
        [showCurrentPageReport]="true" [paginator]="true"
        currentPageReportTemplate="Mostrando {first} de {last} de {totalRecords} registros">
        <ng-template pTemplate="header">
            <tr>
                <th style="min-width:15rem" pSortableColumn="id">
                    <div class="flex align-items-center">
                        Id <p-sortIcon field="id" />
                        <p-columnFilter type="numeric" field="id" display="menu"></p-columnFilter>
                    </div>
                </th>
                <th style="min-width:15rem" pSortableColumn="email">
                    <div class="flex align-items-center">
                        E-mail <p-sortIcon field="email" />
                        <p-columnFilter type="text" field="email" display="menu"></p-columnFilter>
                    </div>
                </th>
                <th style="min-width:15rem" pSortableColumn="ehAdmin">
                    <div class="flex align-items-center">
                        Admin? <p-sortIcon field="ehAdmin" />
                        <p-columnFilter type="text" field="ehAdmin" display="menu"></p-columnFilter>
                    </div>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-dados>
            <tr>
                <td>{{dados.id}}</td>
                <td>{{dados.email}}</td>
                <td><p-tag [value]="dados.ehAdmin ? 'Sim' : 'Não'" [severity]="tipoBadge(dados.ehAdmin)"></p-tag></td>
            </tr>
        </ng-template>
    </p-table>
</div>

Answer 1

First, you should probably avoid using stuff like ::ng-deep. As far as I know it is deprecated and far from best practice.

So now to your PrimeNG styling.
PrimeNG usually has a global styling for its components.

You can create your own global styling with their Sass-Repository

I usually place it in a theme folder and then include it in the angular styles.scss.
theme-base is the basic styling.
Under themes you can find preconfigured themes like material or bootstrap styling.

In there you can find a lot of classes for each and every component and this is also the place to change the global styles for your PrimeNG Components or add custom classes.

In your specific case, finde the _datatable.scss File and edit it or add your own custom classes and styling there.