Prime Treetable Selection

Selection

Single Selection

col.header rowData[col.field]

<p-treeTable [value]="filesSingleSelection" [columns]="cols" selectionMode="single" [(selection)]="selectedSingleSelection" dataKey="name">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        { { col.header } }
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
    <tr [ttRow]="rowNode" [ttRow]="rowNode" [ttSelectableRow]="rowNode">
      <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>

Multiple Selection with MetaKey

col.header rowData[col.field]

<p-treeTable [value]="filesMultipleSelectionMetaKey" [columns]="cols" selectionMode="multiple" [(selection)]="selectedMultipleSelectionMetaKey" dataKey="name" [metaKeySelection]="true">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        { { col.header } }
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
    <tr [ttRow]="rowNode" [ttRow]="rowNode" [ttSelectableRow]="rowNode">
      <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>

Multiple Selection without MetaKey

col.header rowData[col.field]

<p-treeTable [value]="filesMultipleSelectionNoMetaKey" [columns]="cols" selectionMode="multiple" [(selection)]="selectedMultipleSelectionNoMetaKey" dataKey="name">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        { { col.header } }
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
    <tr [ttRow]="rowNode" [ttRow]="rowNode" [ttSelectableRow]="rowNode">
      <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>

Checkbox Selection

Toggle All col.header rowData[col.field]

<p-treeTable [value]="filesCheckboxSelection" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedCheckboxSelection">
  <ng-template pTemplate="caption">
    <div class="p-d-flex">
      <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
      <span class="p-ml-2">Toggle All</span>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        { { 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>
        <p-treeTableCheckbox [value]="rowNode" *ngIf="i == 0"></p-treeTableCheckbox>
        { { rowData[col.field] } }
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Events

col.header rowData[col.field]

<p-toast></p-toast>
 
<p-treeTable [value]="filesEvents" [columns]="cols" selectionMode="single" [(selection)]="selectedEvents" dataKey="name" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        { { col.header } }
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
    <tr [ttRow]="rowNode" [ttRow]="rowNode" [ttSelectableRow]="rowNode">
      <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>

Sort Colgroup