Componente p-table #27

Activity

1. Mukarram990 commented on Sep 3, 2024

   

   Mukarram990

   on Sep 3, 2024

   More actions

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