Home / Questions / 300867
Accepted
Jhoa Khriz
Asked: 2020-10-15 17:41:54 +0800 CST 2020-10-15 17:41:54 +0800 CST

How to resize a column in Angular with PrimeNG?

  • 772

Can you help me how I can modify the size of the columns in Angular for which I use PrimeNG. The table that I have calls the data stored in the DB, for which we call from the .ts but according to the code that I have, the size of the ID is very wide.

Reference image

HTML 

    <p-table #dt [columns]="columnas" [value]="preguntas" selectionMode="single" [(selection)]="preguntaSeleccionada" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="15">
      <ng-template pTemplate="caption">
        <h3> Lista de Preguntas </h3>
        <div style="text-align: left">
          <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
          <input type="text" pInputText size="50" placeholder="Filtro Global" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"></div>
      </ng-template>
      <ng-template pTemplate="header" let-columns>
        <tr class="text-center">
          <th *ngFor="let col of columns" [pSortableColumn]="col.field">
            {{col.header}}
            <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
          <td *ngFor="let col of columns">
            {{rowData[col.field]}}
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="summary" let-rowData>
        <div style="text-align:left">
          <button type="button" pButton icon="fa fa-plus" routerLink="../agregarPregunta" class="ui-button-rounded" style="margin-left: 10px" role="button" routerLinkActive="active" label="Nueva pregunta"></button>
        </div>
      </ng-template>
    </p-table>

The .TS part

    constructor(private servicePre: PreguntasService, private router: Router) { }`
    ngOnInit() {
    this.listar();
    this.columnas = [
      { field: 'preguntas_Id', header: 'Id', size: '11' },
      { field: 'preguntas_Descripcion', header: 'Descripcion' },
      { field: 'preguntas_Estado', header: 'Estado' },
    ];
  `}`
 `listar() {
    this.servicePre.getPregunta().subscribe(data => {
      this.preguntas = data;
    });
  }`
angular

1 Answers

  1. Best Answer

    You can use [width]/witdh, it depends if you want the size to be dynamic. Both the header and the body must have the same size.

      <ng-template pTemplate="header" let-columns>
    <tr class="text-center">
      <th *ngFor="let col of columns" [pSortableColumn]="col.field" [width]="col.width">
        {{col.header}}
        <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns" [width]="col.width">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
    • 0