The TreeTable component also supports various advanced features such as lazy loading using the onNodeExpand callback, customized editable content using the ng-template template tag, and also context menu implementation, which is similar to the DataTable component. It also supports facets for header and footer using p-header and p-footer tags.
The content display of TreeTable is customized using ng-template. By default, the label of a tree node is displayed inside a tree node. To customize the content, define ng-template inside the column that gets the column as implicit variable (let-col) and rowData as the node instance (let-node="rowData"). In the same way, we can customize header and footer of this component.
Let's take an example of editable tree nodes by placing an input inside each template as shown here:
<p-treeTable [value]="templateTreeTable">
<p-header>Editable Cells with Templating</p-header>
<p-column field="name" header="Name">
<ng-template let-node="rowData" pTemplate="body">
<input type="text" [(ngModel)]="node.data.name"
class="edit-input">
</ng-template>
</p-column>
<p-column field="days" header="Days">
<ng-template let-node="rowData" pTemplate="body">
<input type="text" [(ngModel)]="node.data.days"
class="edit-input">
</ng-template>
</p-column>
<p-column field="type" header="Type">
<ng-template let-node="rowData" pTemplate="body">
<input type="text" [(ngModel)]="node.data.type"
class="edit-input">
</ng-template>
</p-column>
</p-treeTable>
The following screenshot shows a snapshot result with an editable template as an example:
In the preceding snapshot, we can edit all the tree node fields. For example, we updated tour package days from 9 to 20. TreeTable also supports event callbacks for expansion/collapsing nodes such as onNodeExpand, onNodeCollapse, and onContextmenuSelect event for context menu. Refer to the events section for more details.
The following events table provides the complete details of events, parameters, and their description:
Name | Parameters | Description |
onNodeSelect |
|
Callback to invoke when a node is selected. |
onNodeUnselect |
|
Callback to invoke when a node is unselected. |
onNodeExpand |
|
Callback to invoke when a node is expanded. |
onNodeCollapse |
|
Callback to invoke when a node is collapsed. |
onContextMenuSelect |
|
Callback to invoke when a node is selected with right-click. |
onRowDblclick |
|
Callback to invoke when a row is double clicked. |
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter5/treetable.