Angular PrimeNG || Unable to autofit column width for Table Horizontal and Vertical

Question

I have created p-table with Horizontal &Vertical scrollable table using PrimeNG. It’s contains more rows & columns.

Here, I’m facing the challenges unable to adjust the column width automatically instead of hard-coding width.

<ng-template pTemplate="colgroup" let-columns>
  <colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
  </colgroup>
</ng-template>

Below are the code.

<p-table [columns]="th" [value]="tbody" [rows]="100" [paginator]="true" 
[totalRecords]="resultCount" 
  [lazy]="true" (onLazyLoad)="pagination($event)"
[pageLinks]="3" [rowsPerPageOptions]="[100]" scrollable="true" scrollHeight="500px">
<ng-template pTemplate="colgroup" let-columns>
  <colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
  </colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns">
      <div class="table-header">
          {{col.field}}
      </div>
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr>
    <td *ngFor="let col of columns">
      {{rowData[col.field]}}
    </td>
  </tr>
</ng-template>

Here, all the columns are dynamic and most of the time more than 100 different kind of column names. For Ex: Columns names like

Also, we need to wrap the columns contains less text for ex: ID column

I need to achieve this with vertical&horizontal scroll. Can you help me on this?

Appreciate your help!!!

Answer 1

This will create table columns with width 200px.

<colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
</colgroup>

This will create table columns with equally distributed width.

<colgroup>
    <col *ngFor="let col of columns">
</colgroup>

Complete code is available in stackblitz.