TreeTable is used to display hierarchical data in a tabular format. It requires an array of TreeNode objects as its value and provides a TreeNode API with many optional properties. TreeTable defines column components as child elements with header, footer, field, and style attributes similar to DataTable component.
A basic example of a TreeTable component with tourist place tree nodes as information would be written as follows:
<p-treeTable [value]="basicTreeTable">
<p-header>Basic</p-header>
<p-column field="name" header="Name"></p-column>
<p-column field="days" header="Days"></p-column>
<p-column field="type" header="Type"></p-column>
</p-treeTable>
The component is created by arranging TreeNode objects in a hierarchical manner. The TreeNode object consists of many properties as listed here:
| Name | Type | Default | Description |
| label | string | null | Label of the node. |
| data | any | null | Data represented by the node. |
| icon | string | null | Icon of the node to display next to content. Not used by TreeTable. |
| expandedIcon | string | null | Icon to use in expanded state. Not used by TreeTable. |
| collapsedIcon | string | null | Icon to use in collapsed state. Not used by TreeTable. |
| children | TreeNode[] | null | An array of tree nodes as children. |
| leaf | boolean | null | Specifies if the node has children. Used in lazy loading. |
| style | string | null | Inline style of the node. |
| styleClass | string | null | Style class of the node. |
The TreeNode structure for the tourist places example would be as follows:
{
"data": [
{
"data": {
"name": "Asia",
"days": "15",
"type": "Continent"
},
"children": [
{
"data": {
"name": "India",
"days": "6",
"type": "Country"
},
"children": [
{
"data": {
"name": "Goa",
"days": "2",
"type": "City"
}...
}]
}]
} }
...
}
The injected service and the same service call representation in component class is almost similar to the Tree component explained in the previous section. The following screenshot shows a snapshot result with hierarchical tourist information as an example:
The component also supports dynamic columns where each column is created by looping through the ngFor directive.