TreeTable is used to display hierarchical data in tabular format.
import { TreeTableModule } from 'primeng/treetable';
TreeTable requires a collection of TreeNode instances as a value components as children for the representation.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Size</th>
<th>Type</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData">
<tr [ttRow]="rowNode">
<td>
<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
{{ rowData.name }}
</td>
<td>{{ rowData.size }}</td>
<td>{{ rowData.type }}</td>
</tr>
</ng-template>
</p-treeTable>
Columns can be created programmatically.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="header" let-columns>
<tr [ttRow]="rowNode">
<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>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>
Custom content at caption, header, body and summary sections are supported via templating.
Name | Size | Type |
---|
200mb | Folder | ||
20mb | Folder | ||
150kb | Folder | ||
75kb | Folder | ||
25mb | Folder | ||
50mb | Folder | ||
5mb | Folder | ||
150kb | Folder | ||
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="caption"> FileViewer </ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{ col.header }}
</th>
<th style="width: 10rem">
<p-button icon="pi pi-cog"></p-button>
</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>
<td>
<p-button icon="pi pi-search" styleClass="p-button-success" [style]="{ 'margin-right': '.5em' }"></p-button>
<p-button icon="pi pi-pencil" styleClass="p-button-warning"></p-button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="summary">
<div style="text-align:left">
<p-button icon="pi pi-refresh" label="Reload"></p-button>
</div>
</ng-template>
</p-treeTable>
Pagination is enabled by adding paginator property and defining rows per page.
Name | Size | Type |
---|
442kb | Type 0 | |
579kb | Type 1 | |
37kb | Type 2 | |
636kb | Type 3 | |
117kb | Type 4 | |
488kb | Type 5 | |
159kb | Type 6 | |
982kb | Type 7 | |
372kb | Type 8 | |
864kb | Type 9 |
<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>
Paginator UI is customized using the paginatorleft and paginatorright property. Each element can also be customized further with your own UI to replace the default one, refer to the Paginator component for more information about the advanced customization options.
Name | Size | Type |
---|
529kb | Type 0 | |
236kb | Type 1 | |
326kb | Type 2 | |
333kb | Type 3 | |
962kb | Type 4 | |
557kb | Type 5 | |
653kb | Type 6 | |
894kb | Type 7 | |
171kb | Type 8 | |
731kb | Type 9 |
<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
<ng-template pTemplate="paginatorleft">
<p-button icon="pi pi-refresh" styleClass="p-button-text"></p-button>
</ng-template>
<ng-template pTemplate="paginatorright">
<p-button icon="pi pi-download" styleClass="p-button-text"></p-button>
</ng-template>
</p-treeTable>
Sorting on a column is enabled by adding the ttSortableColumn property.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ttSortableColumn]="col.field">
{{ col.header }}
<p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
</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>
Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" sortMode="multiple" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ttSortableColumn]="col.field">
{{ col.header }}
<p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
</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>
The filterMode specifies the filtering strategy, in lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in strict mode when the query matches a node, filtering continues on all descendants. A general filled called filterGlobal is also provided to search all columns that support filtering.
Name | Size | Type |
---|---|---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-selectButton [options]="filterModes" [(ngModel)]="filterMode" optionLabel="label" optionValue="value"></p-selectButton>
<p-treeTable #tt [value]="files" [columns]="cols" [filterMode]="filterMode" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="caption">
<div class="flex justify-content-end align-items-center">
<div class="p-input-icon-left">
<i class="pi pi-search"></i>
<input type="text" pInputText placeholder="Global Search" (input)="tt.filterGlobal($event.target.value, 'contains')" />
</div>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{ col.header }}
</th>
</tr>
<tr>
<th *ngFor="let col of cols">
<input pInputText type="text" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)" />
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData">
<tr>
<td *ngFor="let col of cols; let i = index">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td [attr.colspan]="cols.length">No data found.</td>
</tr>
</ng-template>
</p-treeTable>
Single node selection is configured by setting selectionMode as single along with selection properties to manage the selection value binding.
By default, metaKey press (e.g. ⌘) is necessary to unselect a node however this can be configured with disabling the metaKeySelection property. In touch enabled devices this option has no effect and behavior is same as setting it to false
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-inputSwitch [(ngModel)]="metaKeySelection"></p-inputSwitch>
<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [metaKeySelection]="metaKeySelection" [(selection)]="selectedNode" dataKey="name" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with disabling the metaKeySelection property. Note that in touch enabled devices, TreeTable always ignores metaKey. In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-inputSwitch [(ngModel)]="metaKeySelection"></p-inputSwitch>
<p-treeTable [value]="files" [columns]="cols" selectionMode="multiple" [(selection)]="selectedNodes" dataKey="name" [metaKeySelection]="metaKeySelection" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.
In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedNodes" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="caption">
<div class="flex">
<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
<span class="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>
TreeTable provides onNodeSelect and onNodeUnselect events to listen selection events.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [(selection)]="selectedNode" dataKey="name" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
Brand | Sale Rate | |||
---|---|---|---|---|
Sales | Profits | |||
Last Year | This Year | Last Year | This Year |
51% | 40% | $54,406.00 | $43,342 | |
83% | 96% | $423,132 | $312,122 | |
38% | 5% | $12,321 | $8,500 | |
49% | 22% | $745,232 | $650,323 | |
17% | 79% | $643,242 | 500,332 | |
52% | 65% | $421,132 | $150,005 | |
82% | 12% | $131,211 | $100,214 | |
44% | 45% | $66,442 | $53,322 | |
90% | 56% | $765,442 | $296,232 | |
75% | 54% | $21,212 | $12,533 |
<p-treeTable [value]="sales" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="header">
<tr>
<th rowspan="3">Brand</th>
<th colspan="4">Sale Rate</th>
</tr>
<tr>
<th colspan="2">Sales</th>
<th colspan="2">Profits</th>
</tr>
<tr>
<th>Last Year</th>
<th>This Year</th>
<th>Last Year</th>
<th>This Year</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData">
<tr>
<td>
<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
{{ rowData.brand }}
</td>
<td>{{ rowData.lastYearSale }}</td>
<td>{{ rowData.thisYearSale }}</td>
<td>{{ rowData.lastYearProfit }}</td>
<td>{{ rowData.thisYearProfit }}</td>
</tr>
</ng-template>
<ng-template pTemplate="footer">
<tr>
<td colspan="3">Totals</td>
<td>$3,283,772</td>
<td>$2,126,925</td>
</tr>
</ng-template>
</p-treeTable>
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering occurs. Sample below imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
Enabling the lazy property and assigning the logical number of rows to totalRecords by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
In addition, only the root elements should be loaded, children can be loaded on demand using onNodeExpand callback.
Name | Size | Type |
---|
793kb | Type 0 | |
557kb | Type 1 | |
371kb | Type 2 | |
771kb | Type 3 | |
539kb | Type 4 | |
790kb | Type 5 | |
448kb | Type 6 | |
699kb | Type 7 | |
749kb | Type 8 | |
929kb | Type 9 |
<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [lazy]="true" (onLazyLoad)="loadNodes($event)" [totalRecords]="1000" [loading]="loading" (onNodeExpand)="onNodeExpand($event)" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>
Incell editing is enabled by defining input elements with treeTableCellEditor.
Name | Size | Type |
---|
<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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" ttEditableColumn [ngClass]="{ 'p-toggler-column': i === 0 }">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
<p-treeTableCellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData[col.field]" />
</ng-template>
<ng-template pTemplate="output">{{ rowData[col.field] }}</ng-template>
</p-treeTableCellEditor>
</td>
</tr>
</ng-template>
</p-treeTable>
Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" scrollHeight="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>
Horizontal scrolling is enabled when the total width of columns exceeds table width.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" scrollHeight="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:500px" />
</colgroup>
</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>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>
A column can be fixed during horizontal scrolling by enabling the frozenColumns property.
Name |
---|
Size | Type | Size | Type | Size | Type |
---|
200mb | Folder | 200mb | Folder | 200mb | Folder |
20mb | Folder | 20mb | Folder | 20mb | Folder |
150kb | Folder | 150kb | Folder | 150kb | Folder |
75kb | Folder | 75kb | Folder | 75kb | Folder |
25mb | Folder | 25mb | Folder | 25mb | Folder |
50mb | Folder | 50mb | Folder | 50mb | Folder |
5mb | Folder | 5mb | Folder | 5mb | Folder |
150kb | Folder | 150kb | Folder | 150kb | Folder |
1500mb | Folder | 1500mb | Folder | 1500mb | Folder |
<p-treeTable [value]="files" [columns]="scrollableCols" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeight="250px" frozenWidth="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:250px" />
</colgroup>
</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-rowData="rowData" let-columns="columns">
<tr style="height: 57px">
<td *ngFor="let col of columns; let i = index">
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
<ng-template pTemplate="frozenbody" let-rowNode let-rowData="rowData">
<tr style="height: 57px">
<td>
<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
{{ rowData.name }}
</td>
</tr>
</ng-template>
</p-treeTable>
Columns can be resized with drag and drop when resizableColumns is enabled. Default resize mode is fit that does not change the overall table width.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
Setting columnResizeMode as expand changes the table width as well.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" columnResizeMode="expand" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
Order of the columns can be changed using drag and drop when reorderableColumns is present.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [reorderableColumns]="true" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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>
Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="selectedColumns" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<ng-template pTemplate="caption">
<div style="text-align:left">
<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected" [style]="{ width: '20em' }" defaultLabel="Choose Columns" display="chip"></p-multiSelect>
</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>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>
Particular rows and cells can be styled based on conditions. The ngClass receives a row data as a parameter to return a style class for a row whereas cells are customized using the body template.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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 [ngClass]="{ 'p-highlight': rowData.size.endsWith('kb') }">
<td *ngFor="let col of columns; let i = index" [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>
TreeTable has exclusive integration with ContextMenu using the contextMenu event to open a menu on right click alont with contextMenuSelection properties to control the selection via the menu.
Name | Size | Type |
---|
200mb | Folder | |
20mb | Folder | |
150kb | Folder | |
75kb | Folder | |
25mb | Folder | |
50mb | Folder | |
5mb | Folder | |
150kb | Folder | |
1500mb | Folder |
<p-toast [style]="{ marginTop: '80px' }"></p-toast>
<p-treeTable [value]="files" [columns]="cols" dataKey="name" [(contextMenuSelection)]="selectedNode" [contextMenu]="cm" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
<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 [ttContextMenuRow]="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>
<p-contextMenu #cm [model]="items"></p-contextMenu>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-treetable | Container element. |
p-treetable-caption | Caption element. |
p-treetable-summary | Section section. |
p-sortable-column | Sortable column header. |
p-treetable-scrollable-header | Container of header in a scrollable table. |
p-treetable-scrollable-body | Container of body in a scrollable table. |
p-treetable-scrollable-footer | Container of footer in a scrollable table. |
p-treetable-loading | Loader mask. |
p-treetable-loading-content | Loader content. |
p-treetable-wrapper | Loader content. |
p-treetable-scrollable-wrapper | Loader content. |
p-treetable-resizer-helper | Vertical resize indicator bar. |
p-treetable-reorder-indicator-top | Top indicator of column reordering. |
p-treetable-reorder-indicator-top | Bottom indicator of column reordering. |
TreeTable uses a treegrid element whose attributes can be extended with the tableProps option. This property allows passing aria roles and attributes like aria-label and aria-describedby to define the table for readers. Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to "ascending" or "descending".
Row elements manage aria-expanded for state along with aria-posinset, aria-setsize and aria-level attribute to define the hierachy.
When selection is enabled, aria-selected is set to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute.
Editable cells use custom templating so you need to manage aria roles and attributes manually if required.
Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features.
Key | Function |
---|---|
tab | Moves through the headers. |
enter | Sorts the column. |
space | Sorts the column. |
Key | Function |
---|---|
tab | Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the page tab sequence. |
shift + tab | Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the page tab sequence. |
enter | Selects the focused treenode. |
space | Selects the focused treenode. |
down arrow | Moves focus to the next treenode. |
up arrow | Moves focus to the previous treenode. |
right arrow | If node is closed, opens the node otherwise moves focus to the first child node. |
left arrow | If node is open, closes the node otherwise moves focus to the parent node. |
API defines helper props, events and others for the PrimeNG TreeTable module.
Name | Type | Default | Description |
---|---|---|---|
value | array | null | An array of objects to display. |
columns | array | null | An array of objects to represent dynamic columns. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
tableStyle | any | null | Inline style of the table. |
tableStyleClass | string | null | Style class of the table. |
autoLayout | boolean | false | Whether the cell widths scale according to their content or not. |
lazy | boolean | false | Defines if data is loaded and interacted with in lazy manner. |
lazyLoadOnInit | boolean | true | Whether to call lazy loading on initialization. |
paginator | boolean | false | When specified as true, enables the pagination. |
rows | number | null | Number of rows to display per page. |
first | number | 0 | Index of the first row to be displayed. |
totalRecords | number | null | Number of total records, defaults to length of value when not defined. |
pageLinks | number | null | Number of page links to display in paginator. |
rowsPerPageOptions | array | null | Array of integer/object values to display inside rows per page dropdown of paginator |
alwaysShowPaginator | boolean | true | Whether to show it even there is only one page. |
showFirstLastIcon | boolean | true | When enabled, icons are displayed on paginator to go first and last page. |
paginatorPosition | string | bottom | Position of the paginator, options are "top","bottom" or "both". |
paginatorDropdownAppendTo | any | null | Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). |
currentPageReportTemplate | string | ({currentPage} of {totalPages}) | Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords} |
showCurrentPageReport | boolean | false | Whether to display current page report. |
showJumpToPageDropdown | boolean | false | Whether to display a dropdown to navigate to any page. |
showPageLinks | boolean | true | Whether to show page links. |
defaultSortOrder | number | 1 | Sort order to use when an unsorted column gets sorted by user interaction. |
sortMode | string | single | Defines whether sorting works on single column or on multiple columns. |
resetPageOnSort | boolean | true | When true, resets paginator to first page after sorting. |
customSort | boolean | false | Whether to use the default sorting or a custom one using sortFunction. |
sortField | string | null | Name of the field to sort data by default. |
sortOrder | number | 1 | Order to sort when default sorting is enabled. |
multiSortMeta | array | null | An array of SortMeta objects to sort the data by default in multiple sort mode. |
sortFunction | function | null | An event emitter to invoke on custom sorting, refer to sorting section for details. |
filters | array | null | An array of FilterMetadata objects to provide external filters. |
filterDelay | number | 300 | Delay in milliseconds before filtering the data. |
globalFilterFields | array | null | An array of fields as string to use in global filtering. |
filterMode | string | lenient | Mode for filtering valid values are "lenient" and "strict". Default is lenient. |
filterLocale | string | undefined | Locale to use in filtering. The default locale is the host environment's current locale. |
selectionMode | string | null | Specifies the selection mode, valid values are "single" and "multiple". |
selection | any | null | Selected row in single mode or an array of values in multiple mode. |
contextMenuSelection | any | null | Selected row with a context menu. |
dataKey | string | null | A property to uniquely identify a record in data. |
metaKeySelection | boolean | true | Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically. |
compareSelectionBy | string | deepEquals | Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields. |
rowHover | boolean | false | Adds hover effect to rows without the need for selectionMode. |
loading | boolean | false | Displays a loader to indicate data load is in progress. |
loadingIcon | string | null | The icon to show while indicating data load is in progress. |
showLoader | boolean | true | Whether to show the loading mask when loading property is true. |
scrollable | boolean | false | When specifies, enables horizontal and/or vertical scrolling. |
scrollHeight | string | null | Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size. |
virtualScroll | boolean | false | Whether the data should be loaded on demand during scroll. |
virtualScrollItemSize | number | 28 | Height of a row to use in calculations of virtual scrolling. |
virtualScrollOptions | ScrollerOptions | null | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. |
frozenWidth | string | null | Width of the frozen columns container. |
frozenColumns | array | null | An array of objects to represent dynamic columns that are frozen. |
resizableColumns | boolean | false | When enabled, columns can be resized using drag and drop. |
columnResizeMode | string | fit | Defines whether the overall table width should change on column resize, valid values are "fit" and "expand". |
reorderableColumns | boolean | false | When enabled, columns can be reordered using drag and drop. |
contextMenu | ContextMenu | null | Local ng-template varilable of a ContextMenu. |
rowTrackBy | Function | null | Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. |
Name | Parameters |
---|---|
caption | - |
header | $implicit: columns |
body | $implicit: serializedNode node: serializedNode.node rowData: serializedNode.node.data columns: columns |
loadingbody | - |
footer | $implicit: columns |
summary | - |
colgroup | $implicit: columns |
emptymessage | $implicit: columns frozen: frozen |
paginatorleft | - |
paginatorright | - |
paginatordropdownitem | - |
frozenheader | $implicit: columns |
frozenbody | $implicit: serializedNode node: serializedNode.node rowData: serializedNode.node.data columns: columns |
frozenfooter | $implicit: columns |
frozencolgroup | $implicit: columns |
loadingicon | - |
reorderindicatorupicon | - |
reorderindicatordownicon | - |
sorticon | $implicit: sortOrder |
checkboxicon | $implicit: checked partialSelected: rowNode.node.partialSelected |
headercheckboxicon | $implicit: checked |
togglericon | $implicit: rowNode.node.expanded |
paginatorfirstpagelinkicon | - |
paginatorlastpagelinkicon | - |
paginatorpreviouspagelinkicon | - |
paginatornextpagelinkicon | - |
Name | Parameters | Description |
---|---|---|
onNodeExpand | event.originalEvent: Browser event node: Expanded node. | Callback to invoke when a node is expanded. |
onNodeCollapse | event.originalEvent: Browser event node: Collapsed node. | Callback to invoke when a node is collapsed. |
onPage | event.first: Index of first record in page event.rows: Number of rows on the page | Callback to invoke when pagination occurs. |
onSort | event.field: Field name of the sorted column event.order: Sort order as 1 or -1 event.multisortmeta: Sort metadata in multi sort mode. See multiple sorting section for the structure of this object. | Callback to invoke when a column gets sorted. |
onFilter | event.filters: Filters object having a field as the property key and an object with value, matchMode as the property value. event.filteredValue: Filtered data after running the filtering. | Callback to invoke when data is filtered. |
onLazyLoad | event.first = First row offset event.last: Last index of the new data range to be loaded. event.rows = Number of rows per page event.sortField = Field name to sort with event.sortOrder = Sort order as number, 1 for asc and -1 for dec event.multiSortMeta: An array of SortMeta objects used in multiple columns sorting. Each SortMeta has field and order properties. | event.filters: FilterMetadata object having field as key and filter value, filter matchMode as valueCallback to invoke when paging, sorting or filtering happens in lazy mode. |
onColResize | event.element: Resized column header event.delta: Change of width in number of pixels | Callback to invoke when a column is resized. |
onColReorder | event.dragIndex: Index of the dragged column event.dropIndex: Index of the dropped column event.columns: Columns array after reorder. | Callback to invoke when a column is reordered. |
onNodeSelect | event.originalEvent: Browser event event.node: Selected node | Callback to invoke when a node is selected. |
onNodeUnselect | event.originalEvent: Browser event event.data: Unselected node | Callback to invoke when a node is unselected. |
onContextMenuSelect | event.originalEvent: Browser event event.node: Selected node | Callback to invoke when a node is selected with right click. |
onHeaderCheckboxToggle | event.originalEvent: Browser event event.checked: State of the header checkbox | Callback to invoke when state of header checkbox changes. |
onEditInit | event.column: Column object of the cell event.data: Node data | Callback to invoke when a cell switches to edit mode. |
onEditComplete | event.column: Column object of the cell event.data: Node data | Callback to invoke when cell edit is completed. |
onEditCancel | event.column: Column object of the cell event.data: Node data | Callback to invoke when cell edit is cancelled with escape key. |
Name | Parameters | Description |
---|---|---|
reset | - | Clears the sort and paginator state. |