Open In App

Angular PrimeNG TreeTable Style

Improve
Improve
Like Article
Like
Save
Share
Report

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 { }


Output:

 

Reference: https://primefaces.org/primeng/treetable/style



Last Updated : 15 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads