Angular PrimeNG TreeTable Reorder

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 Reorder enables the reordering of columns in the TreeTable component. Columns can be reordered according to the user’s needs which makes the table More Interactive and user-friendly.

Syntax:

<p-treeTable
    [value]="tableData"
      [columns]="cols"
      [reorderableColumns]="true"
>
    <ng-template pTemplate="header" let-columns>
        <tr>
              <th *ngFor="let col of columns" 
                  ttReorderableColumn>
                {{ col.header }}
              </th>
        </tr>
     </ng-template>
</p-treeTable>

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 Reorder.

app.component.html

<div style="height: calc(100vh - 149px)">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG TreeTable Reorder</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>
                <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',
})
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 Reorder, In this example, we are applying column reordering to scrollable data.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG TreeTable Reorder</h4>

<p-treeTable [value]="tableData" [columns]="cols"
    [scrollable]="true" scrollHeight="200px"
    [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>
            <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>

app.component.ts

import { Component } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    tableData: TreeNode[] = [];
    cols: any[];
    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.cols = [
            { field: 'name', header: 'Name', width: '50%' },
            { field: 'age', header: 'Age', width: '30%' },
        ];
        this.tableData = [
            {
                data: {
                    name: 'David',
                    age: '40',
                },
                children: [
                    {
                        data: {
                            name: 'Nathan',
                            age: '16',
                        },
                    },
                    {
                        data: {
                            name: 'Shane',
                            age: '14',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Warner',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Max',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Willy',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Miley',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Sam',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'James',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: '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/reorder