Angular PrimeNG TreeTable Style

Last Updated : 15 Sep, 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. This article will show us how to use TreeTable Column Resize in Angular PrimeNG.

Angular PrimeNG TreeTable Style is used to style the table cells and rows based on the conditions. This makes the TreeTable component more Interactive and user-friendly.

Syntax:

// In app.component.ts  .classname{      // Styles  }    // In app.component.html  <tr [ngClass]="{'className': condition}">

Creating Angular application & Module Installation:

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

ng new appname

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

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Example 1: Below is a simple example that demonstrates the use of the Angular PrimeNG TreeTable Styles.

app.component.html

<div style="height: calc(100vh - 149px)"> 
    <h2 style="color: green"> 
        GeeksforGeeks 
    </h2> 
    <h4> 
        Angular PrimeNG TreeTable Style 
    </h4> 
  
    <p-treeTable 
        [columns]="cols"  
        [value]="tableData"  
        [reorderableColumns]="true" 
    > 
        <ng-template pTemplate="colgroup" let-columns> 
            <colgroup> 
                <col *ngFor="let col of columns" /> 
            </colgroup> 
        </ng-template> 
  
        <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 [ngClass]="{ 'row': rowData.firstname == 'David' }"> 
                <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> 
</div>

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { NodeService } from './nodeservice'; 
import { TreeNode } from 'primeng/api'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styles: [ 
        ` 
      .row { 
          background-color: blue !important; 
          color: #ffffff !important; 
      } 
  `, 
    ], 
}) 
export class AppComponent { 
    tableData: TreeNode[] = []; 
    cols: any[] = []; 
    constructor(private nodeService: NodeService) { } 
  
    ngOnInit() { 
        this.cols = [ 
            { field: 'firstname', header: 'First Name' }, 
            { field: 'lastname', header: 'Last Name' }, 
  
            { field: 'age', header: 'Age' }, 
        ]; 
        this.tableData = [ 
            { 
                data: { 
                    firstname: 'David', 
                    lastname: 'ace', 
                    age: '40', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Nathan', 
                            lastname: 'ace', 
  
                            age: '16', 
                        }, 
                        children: [ 
                            { 
                                data: { 
                                    firstname: 'Abe', 
                                    lastname: 'ace', 
  
                                    age: '12', 
                                }, 
                            }, 
                            { 
                                data: { 
                                    firstname: 'Ksi', 
                                    lastname: 'ace', 
  
                                    age: '12', 
                                }, 
                            }, 
                        ], 
                    }, 
                    { 
                        data: { 
                            firstname: 'Shane', 
                            lastname: 'ace', 
  
                            age: '14', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Warner', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            lastname: 'ace', 
                            firstname: 'Michelle', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Max', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Willy', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Miley', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Sam', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'James', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            lastname: 'ace', 
                            firstname: 'Charlie', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
        ]; 
    } 
}

app.module.ts

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'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        TreeTableModule, 
        ButtonModule, 
        InputTextModule, 
        HttpClientModule, 
        FormsModule, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [NodeService], 
}) 
  
export class AppModule { }

Output:

Example 2: Below is a simple example that demonstrates the use of the Angular PrimeNG TreeTable Styles.

app.component.html

<div style="height: calc(100vh - 149px)"> 
    <h2 style="color: green">GeeksforGeeks</h2> 
    <h4>Angular PrimeNG TreeTable Style</h4> 
  
    <p-treeTable 
        [columns]="cols"  
        [value]="tableData"  
        [reorderableColumns]="true" 
    > 
        <ng-template pTemplate="colgroup" let-columns> 
            <colgroup> 
                <col *ngFor="let col of columns" /> 
            </colgroup> 
        </ng-template> 
  
        <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 [ngClass]="{ 'row': rowData.firstname == 'David' }"> 
                <td *ngFor="let col of columns; let i = index"
                    [ngClass]= 
"{'cell': col.field === 'firstname' &&  rowData.firstname == 'David'}"> 
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"> 
                    </p-treeTableToggler> 
                    {{ rowData[col.field] }} 
                </td> 
            </tr> 
        </ng-template> 
    </p-treeTable> 
</div>

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { NodeService } from './nodeservice'; 
import { TreeNode } from 'primeng/api'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styles: [ 
        ` 
      .row { 
          background-color: blue !important; 
          color: #ffffff !important; 
      } 
  
      .cell { 
        background-color: black !important; 
      } 
  `, 
    ], 
}) 
export class AppComponent { 
    tableData: TreeNode[] = []; 
    cols: any[] = []; 
    constructor(private nodeService: NodeService) { } 
  
    ngOnInit() { 
        this.cols = [ 
            { field: 'firstname', header: 'First Name' }, 
            { field: 'lastname', header: 'Last Name' }, 
  
            { field: 'age', header: 'Age' }, 
        ]; 
        this.tableData = [ 
            { 
                data: { 
                    firstname: 'David', 
                    lastname: 'ace', 
                    age: '40', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Nathan', 
                            lastname: 'ace', 
  
                            age: '16', 
                        }, 
                        children: [ 
                            { 
                                data: { 
                                    firstname: 'Abe', 
                                    lastname: 'ace', 
  
                                    age: '12', 
                                }, 
                            }, 
                            { 
                                data: { 
                                    firstname: 'Ksi', 
                                    lastname: 'ace', 
  
                                    age: '12', 
                                }, 
                            }, 
                        ], 
                    }, 
                    { 
                        data: { 
                            firstname: 'Shane', 
                            lastname: 'ace', 
  
                            age: '14', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Warner', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            lastname: 'ace', 
                            firstname: 'Michelle', 
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Max', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Willy', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Miley', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'Sam', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            firstname: 'Charlie', 
                            lastname: 'ace', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
            { 
                data: { 
                    firstname: 'James', 
                    lastname: 'ace', 
  
                    age: '55', 
                }, 
                children: [ 
                    { 
                        data: { 
                            firstname: 'Michelle', 
                            lastname: 'ace', 
  
                            age: '20', 
                        }, 
                    }, 
                    { 
                        data: { 
                            lastname: 'ace', 
                            firstname: 'Charlie', 
  
                            age: '24', 
                        }, 
                    }, 
                ], 
            }, 
        ]; 
    } 
} 

app.module.ts

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'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        TreeTableModule, 
        ButtonModule, 
        InputTextModule, 
        HttpClientModule, 
        FormsModule, 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [NodeService], 
}) 
  
export class AppModule { }