Prime Treetable Resize

Resize

Fit Mode

col.header rowData[col.field]

<p-treeTable [value]="filesFitMode" [columns]="cols" [resizableColumns]="true">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" ttResizableColumn>
        { { col.header } }
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
    <tr>
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
        { { rowData[col.field] } }
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Expand Mode

col.header rowData[col.field]

<p-treeTable [value]="filesExpandMode" [columns]="cols" [resizableColumns]="true" columnResizeMode="expand">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" ttResizableColumn>
        { { col.header } }
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
    <tr>
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
        { { rowData[col.field] } }
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Scrollable

col.header rowData[col.field]

<p-treeTable [value]="filesScrollable" [columns]="cols" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" ttResizableColumn>
        { { col.header } }
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
    <tr>
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
        { { rowData[col.field] } }
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Scrollable with Variable Width

col.header rowData[col.field]

<p-treeTable [value]="filesscrollableVariable" [columns]="cols" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" [style.width]="col.width">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" ttResizableColumn>
        { { col.header } }
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
    <tr>
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
        { { rowData[col.field] } }
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Scroll Reorder