Angular PrimeNG TreeTable Properties

Last Updated : 25 Oct, 2022

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG TreeTable Properties.

TreeTable is used to display hierarchical data in tabular format. The Properties of the TreeTable are used to modify the TreeTable according to the needs and have access to each and every part of the TreeTable. We can modify the UI of the TreeTable using the properties.

Angular PrimeNG TreeTable Properties:

value(array): It is used to set the data of the TreeTable to display.
columns(array): It is an array of objects representing dynamic columns.
style(string): It is the styling of the TreeTable.
styleClass(string): It is the style class of the component.
tableStyle(string): It is the inline styling of the table.
tableStyleClass(string): It is the styling classes of the table.
autoLayout(boolean): It is used to set whether the cell widths scale according to content or not. The default value is false.
lazy(boolean): It defines if data is loaded and interacted with in a lazy manner. The default value is false.
lazyLoadOnInit(boolean): It is used to set whether to call lazy loading on initialization. The default value is false.
paginator(boolean): It is used to specify when the pagination is enabled. The default value is false.
rows(number): It is used to set the number of rows to display per page.
first(number): It is used to set the index of the first row to be displayed.
totalRecords(number): It is the number of total records, that defaults to the length of value when not defined.
pageLinkes(number): It is the number of page links to display in the paginator.
rowsPerPageOptions(array): It is used to set the array of integer/object values to display inside the rows per page dropdown of the paginator.
alwaysShowPaginator(boolean): It is used to set whether to show it even if there is only one page. The default value is true.
showFirstLastIcon(boolean): If set to true, icons are displayed on the paginator to go first and the last page. The default value is set to true.
paginatorPosition(string): It is used to set the positions. For the position of the paginator, options are top, bottom or both.
paginatorDropdownAppendTo(any): It is the target element to attach the paginator dropdown overlay.
currentPageReportTemplate(string): It is the template of the current page report element.
showCurrentPageReport(boolean): It is used to set whether to display the current page report. The default value is false.
showJumpToPageDropdown(boolean): It is used to set whether to display a dropdown to navigate to any page. The default value is false.
showPageLinks(boolean): It is used to set whether to to show page links. The default value is true.
defaultSortOrder(number): It is used to set the sort order to use when an unsorted column gets sorted by user interaction. The default value is 1.
sortMode(string): It defines whether sorting works on a single column or on multiple columns. The default value is single.
resetPageOnSort(boolean): If set to true, resets paginator to the first page after sorting. The default value is true.
customSort(boolean): If set to true, uses custom one using sortFunction. The default value is false.
sortField(string): It is used to set the name of the field to sort data by default.
sortOrder(number): It is used to set the sort order to sort when default sorting is enabled. The default value is 1.
multiSortMeta(array): It is an array of SortMeta objects to sort the data by default in multiple sort mode.
sortFunction(function): It is an event emitter to invoke on custom sorting, refer to the sorting section for details.
filters(array): It is an array of FilterMetadata objects to provide external filters.
filterDelay(number): It is used to set the delay in milliseconds before filtering the data. The default value is 300 milliseconds.
globalFilterFields(array): It is an array of fields as strings to use in global filtering.
filterMode(string): It is the mode for filtering valid values that are “lenient” and “strict”. The default is lenient.
filterLocale(string): It is used to set the locale to use in filtering.
selectionMode(string): It is used to set the selection mode.
selection(any): It is the selected row in a single mode or an array of values in multiple modes.
contextMenuSelection(any): It is the selected row with a context menu.
dataKey(string): It is the property to uniquely identify a record in data.
metaKeySelection(boolean): It defines whether metaKey is should be considered for the selection. The default value is true.
rowHover(boolean): It adds the hover effect to rows without the need for selectionMode. The default value is false.
loading(boolean): It displays a loader to indicate data load is in progress. The default value is false.
loadingIcon(string): It is used to set the loader icon.
showLoader(boolean): It is used to set whether to show the loading mask when the loading property is true. The default value is true.
scrollable(boolean): It is used to set horizontal and/or vertical scrolling. The default value is false.
scrollHeight(string): It is the height of the scroll viewport in fixed pixels or the “flex” keyword for a dynamic size.
virtualScroll(boolean): It is used to set whether the data should be loaded on demand during the scroll. The default value is false.
virtualScrollItemSize(number): It is the height of a row to use in calculations of virtual scrolling. The default value is 28.
virtualScrollOptions(ScrollerOptions): It is used to set whether to use the scroller feature.
frozenWidth(string): It is the width of the frozen columns container.
frozenColumns(array): It is an array of objects to represent dynamic columns that are frozen.
resizableColumns(boolean): It is when enabled, columns can be resized using drag and drop. The default value is false.
columnResizeMode(string): It defines whether the overall table width should change on column resize, valid values are fit and expand. The default value is fit.
reorderableColumns(boolean): It is when enabled, columns can be reordered using drag and drop. The default value is false.
contextMenu(ContextMenu): It is the local ng-template variable of a ContextMenu.
rowTrackBy(Function): It is the function to optimize the dom operations by delegating to ngForTrackBy.

Syntax: Use any property as follows:

<p-treeTable 
    [value]="tableData" 
    [resizableColumns]="true"
</p-treeTable>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new geeks_angular

Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

Project Structure

Example 1: In the following example, we have a TreeTable that has row hover enabled

app.component.html

HTML

<h1 style="color: green; text-align:center;"> 
    GeeksforGeeks 
</h1> 
  
<h3>Angular PrimeNG TreeTable Properties</h3> 
  
<p-treeTable [columns]="cols"  
    [value]="tableData" [rowHover]="true"> 
    <ng-template pTemplate="header"> 
        <tr> 
            <th>Name</th> 
            <th>Age</th> 
        </tr> 
    </ng-template> 
  
    <ng-template pTemplate="body" 
        let-rowNode let-rowData="rowData" 
        let-columns="columns"> 
        <tr> 
            <td> 
                <p-treeTableToggler 
                    [rowNode]="rowNode"> 
                </p-treeTableToggler> 
                {{ rowData.name }} 
            </td> 
            <td>{{ rowData.age }}</td> 
        </tr> 
    </ng-template> 
</p-treeTable>

app.component.ts

Javascript

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { NodeService } from './nodeservice'; 
import { TreeNode } from 'primeng/api'; 
import { TreeTable } from 'primeng/treetable'; 
import { MessageService } from 'primeng/api'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    providers: [MessageService], 
}) 
export class AppComponent { 
    tableData: TreeNode[]; 
  
    cols: any[]; 
  
    constructor(private messageService: MessageService) { } 
  
    ngOnInit() { 
        this.cols = [ 
            { field: 'name', header: 'First Name' }, 
            { field: 'age', header: 'Age' }, 
        ]; 
        this.tableData = [ 
            { 
                data: { 
                    name: 'A', 
                    age: '40', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'B', 
                            age: '16', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'C', 
                            age: '14', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'D', 
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'E', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'F', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'G', 
                    age: '32', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'H', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'I', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'J', 
                    age: '64', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'K', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'L', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'M', 
                    age: '12', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'N', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'O', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'P', 
                    age: '34', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'Q', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'R', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'S', 
                    age: '43', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'T', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'U', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
        ]; 
    } 
}

app.module.ts

Javascript

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpClientModule } from '@angular/common/http'; 
import { BrowserAnimationsModule } from  
    '@angular/platform-browser/animations'; 
import { AppComponent } from './app.component'; 
import { NodeService } from './nodeservice'; 
import { TreeTableModule } from 'primeng/treetable'; 
import { ButtonModule } from 'primeng/button'; 
import { InputTextModule } from 'primeng/inputtext'; 
import { ToastModule } from 'primeng/toast'; 
import { RippleModule } from 'primeng/ripple'; 
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        TreeTableModule, 
        ButtonModule, 
        InputTextModule, 
        HttpClientModule, 
        FormsModule, 
        ToastModule, 
        RippleModule, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [NodeService], 
}) 
export class AppModule { }

Output:

Example 2: In the following example, we have enabled the loading. Hence it shows a loader icon.

app.component.html

HTML

<h1 style="color: green; text-align:center;"> 
    GeeksforGeeks 
</h1> 
  
<h3>Angular PrimeNG TreeTable Properties</h3> 
  
<p-treeTable [columns]="cols"  
    [value]="tableData" [loading]="true"> 
    <ng-template pTemplate="header"> 
        <tr> 
            <th>Name</th> 
            <th>Age</th> 
        </tr> 
    </ng-template> 
  
    <ng-template pTemplate="body" 
        let-rowNode let-rowData="rowData" 
        let-columns="columns"> 
        <tr> 
            <td> 
                <p-treeTableToggler 
                    [rowNode]="rowNode"> 
                </p-treeTableToggler> 
                {{ rowData.name }} 
            </td> 
            <td>{{ rowData.age }}</td> 
        </tr> 
    </ng-template> 
</p-treeTable>

app.component.ts

Javascript

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { NodeService } from './nodeservice'; 
import { TreeNode } from 'primeng/api'; 
import { TreeTable } from 'primeng/treetable'; 
import { MessageService } from 'primeng/api'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    providers: [MessageService], 
}) 
export class AppComponent { 
    tableData: TreeNode[]; 
  
    cols: any[]; 
  
    constructor(private messageService: MessageService) { } 
  
    ngOnInit() { 
        this.cols = [ 
            { field: 'name', header: 'First Name' }, 
            { field: 'age', header: 'Age' }, 
        ]; 
        this.tableData = [ 
            { 
                data: { 
                    name: 'A', 
                    age: '40', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'B', 
                            age: '16', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'C', 
                            age: '14', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'D', 
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'E', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'F', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'G', 
                    age: '32', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'H', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'I', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'J', 
                    age: '64', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'K', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'L', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'M', 
                    age: '12', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'N', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'O', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'P', 
                    age: '34', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'Q', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'R', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    name: 'S', 
                    age: '43', 
                }, 
                children: [ 
                    { 
                        data: { 
                            name: 'T', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            name: 'U', 
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
        ]; 
    } 
}

app.module.ts

Javascript

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpClientModule } from '@angular/common/http'; 
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations'; 
import { AppComponent } from './app.component'; 
import { NodeService } from './nodeservice'; 
import { TreeTableModule } from 'primeng/treetable'; 
import { ButtonModule } from 'primeng/button'; 
import { InputTextModule } from 'primeng/inputtext'; 
import { ToastModule } from 'primeng/toast'; 
import { RippleModule } from 'primeng/ripple'; 
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        TreeTableModule, 
        ButtonModule, 
        InputTextModule, 
        HttpClientModule, 
        FormsModule, 
        ToastModule, 
        RippleModule, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [NodeService], 
}) 
export class AppModule { }