Prime Treetable Sizes

Extra Small TreeTable

Small Table col.header rowData[col.field]

<p-treeTable [value]="filesSmall" [columns]="cols" [reorderableColumns]="true" styleClass="p-treetable-sm">
<ng-template pTemplate="caption">
  Small Table
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns" ttReorderableColumn>
      { { 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>

Small TreeTable

Small Table col.header rowData[col.field]

<p-treeTable [value]="filesSmall" [columns]="cols" [reorderableColumns]="true" styleClass="p-treetable-sm">
<ng-template pTemplate="caption">
  Small Table
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns" ttReorderableColumn>
      { { 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>

Normal TreeTable

Normal Table col.header rowData[col.field]

<p-treeTable [value]="filesNormal" [columns]="cols" [reorderableColumns]="true">
<ng-template pTemplate="caption">
  Normal Table
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns" ttReorderableColumn>
      { { 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>

Large TreeTable

Large Table col.header rowData[col.field]

<p-treeTable [value]="filesLarge" [columns]="cols" [reorderableColumns]="true" styleClass="p-treetable-lg">
<ng-template pTemplate="caption">
  Large Table
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns" ttReorderableColumn>
      { { 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>

Filter TreeSelect