Componente p-table

[Osva2021]

Saludos a todos, soy principiante tanto en angular como en esta librería, Como puedo aumentar o disminuir la altura de una fila en el componente p-table ?, gracias a todos.

[Mukarram990]

You can use [styleClass] property to increase or decrease the size of rows as listed on the primeng website PRIMENG

HTML:

<div class="card">
    <div class="flex justify-content-center mb-3">
        <p-selectButton 
            [options]="sizes" 
            [(ngModel)]="selectedSize" 
            [multiple]="false" 
            optionLabel="name" 
            optionValue="class" />
    </div>
    <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }" [styleClass]="selectedSize.class">
        <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>
</div>

TS:

import { Component } from '@angular/core';
import { Product } from '@domain/product';
import { ProductService } from '@service/productservice';
import { TableModule } from 'primeng/table';
import { SelectButtonModule } from 'primeng/selectbutton';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'table-size-demo',
    templateUrl: 'table-size-demo.html',
    standalone: true,
    imports: [TableModule, SelectButtonModule, CommonModule],
    providers: [ProductService]
})
export class TableSizeDemo {
    products!: Product[];

    sizes!: any[];

    selectedSize: any = '';

    constructor(private productService: ProductService) {}

    ngOnInit() {
        this.productService.getProductsMini().then((data) => {
            this.products = data;
        });

        this.sizes = [
            { name: 'Small', class: 'p-datatable-sm' },
            { name: 'Normal', class: '' },
            { name: 'Large',  class: 'p-datatable-lg' }
        ];
    } 
}