Angular PrimeNG Table Rows Reordering

Angular PrimeNG is a UI toolkit to make web applications with Angular. It consists of hundreds of pre-built component that makes it easy for developers to create a beautiful and responsive web solution in less time. In this article, we will see Angular PrimeNG Table Rows Reordering.

The Table Component is used to show some data in tabular form. Rows reordering can be enabled by setting the pReorderableRow directive with a row index binding to the rows that can be reordered. In addition, the pReorderableRowHandle is used to specify the element that will initiate the dragging. The pReorderableRowDisabled property is used to disable the reordering of the individual rows. 

Syntax:

<p-table [value]="companyProfiles" [columns]="columns">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width:2em"></th>
            <th *ngFor="let column of columns">
                {{column.name}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData 
        let-columns="columns" let-index="rowIndex">
        <tr [pReorderableRow]="index">
            <td>
                <i class="pi pi-bars" [pReorderableRowHandle]="index">
                </i>
            </td>
            <td *ngFor="let column of columns">
                {{rowData[column.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Creating Angular application and Installing the Modules:

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

ng new myapp

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

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps the project structure will look like the following.

Project Structure

Example 1: This example shows the use of the pReorderableRow and pReorderableRowHandle directives to enable the reordering of the rows in a table.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Row Reorder</h4>

    <p-table
        [value]="companyProfiles"
        [columns]="columns">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width:2em"></th>
                <th
                    *ngFor="let column of columns">
                    {{column.name}}
                </th>
            </tr>
        </ng-template>
        <ng-template
            pTemplate="body"
            let-rowData
            let-columns="columns"
            let-index="rowIndex">
            <tr [pReorderableRow]="index">
                <td>
                    <i class="pi pi-bars"
                        [pReorderableRowHandle]="index">
                    </i>
                </td>
                <td *ngFor="let column of columns">
                    {{rowData[column.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

app.component.ts

import { Component } from '@angular/core';

interface CompanyProfile {
    name: String;
    sector: String;
    thisYearSales: String;
    lastYearSales: String;
    thisYearGrowth: String;
    lastYearGrowth: String;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    companyProfiles: CompanyProfile[] = [];
    columns: any[] = [
        {
            name: "Sector",
            field: "sector",
        },
        {
            name: "Company",
            field: "name",
        },
        {
            name: "This Year Sales",
            field: "thisYearSales",
        },
        {
            name: "Last Year Sales",
            field: "lastYearSales",
        },
    ];



    ngOnInit() {
        this.companyProfiles = [
            {
                name: "Apple",
                sector: "Technology",
                thisYearSales: "$ 2,000,000,000",
                lastYearSales: "$ 1,700,000,000",
                thisYearGrowth: "21%",
                lastYearGrowth: "15%",
            },
            {
                name: "Mac Donalds",
                sector: "Food",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "18%",
                lastYearGrowth: "15%",
            },
            {
                name: "Google",
                sector: "Technology",
                thisYearSales: "$ 1,800,000,000",
                lastYearSales: "$ 1,500,000,000",
                thisYearGrowth: "15%",
                lastYearGrowth: "13%",
            },
            {
                name: "Domino's",
                sector: "Food",
                thisYearSales: "$ 1,000,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "13%",
                lastYearGrowth: "14%",
            },
            {
                name: "Meta",
                sector: "Technology",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "11%",
                lastYearGrowth: "12%",
            },
            {
                name: "Snapchat",
                sector: "Technology",
                thisYearSales: "$ 1,500,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "16%",
                lastYearGrowth: "14%",
            },
            {
                name: "Tesla",
                sector: "AutoMobile",
                thisYearSales: "$ 1,300,000,000",
                lastYearSales: "$ 900,000,000",
                thisYearGrowth: "23%",
                lastYearGrowth: "16%",
            },
            {
                name: "Ford",
                sector: "AutoMobile",
                thisYearSales: "$ 700,000,000",
                lastYearSales: "$ 750,000,000",
                thisYearGrowth: "14%",
                lastYearGrowth: "15%",
            },
            {
                name: "Twitter",
                sector: "Technology",
                thisYearSales: "$ 1,200,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "19%",
                lastYearGrowth: "18%",
            }
        ];
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: This example illustrates the use of both row and column reordering in the same table.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Row Reorder</h4>

    <p-table
        [value]="companyProfiles"
        [reorderableColumns]="true"
        [columns]="columns">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width:2em"></th>
                <th
                    *ngFor="let column of columns"
                    pReorderableColumn>
                    {{column.name}}
                </th>
            </tr>
        </ng-template>
        <ng-template
            pTemplate="body"
            let-rowData
            let-columns="columns"
            let-index="rowIndex">
            <tr [pReorderableRow]="index">
                <td>
                    <i class="pi pi-bars"
                        [pReorderableRowHandle]="index">
                    </i>
                </td>
                <td *ngFor="let column of columns">
                    {{rowData[column.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

app.component.ts

import { Component } from '@angular/core';

interface CompanyProfile {
    name: String;
    sector: String;
    thisYearSales: String;
    lastYearSales: String;
    thisYearGrowth: String;
    lastYearGrowth: String;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    companyProfiles: CompanyProfile[] = [];
    columns: any[] = [
        {
            name: "Sector",
            field: "sector",
        },
        {
            name: "Company",
            field: "name",
        },
        {
            name: "This Year Sales",
            field: "thisYearSales",
        },
        {
            name: "Last Year Sales",
            field: "lastYearSales",
        },
    ];

    ngOnInit() {
        this.companyProfiles = [
            {
                name: "Apple",
                sector: "Technology",
                thisYearSales: "$ 2,000,000,000",
                lastYearSales: "$ 1,700,000,000",
                thisYearGrowth: "21%",
                lastYearGrowth: "15%",
            },
            {
                name: "Mac Donalds",
                sector: "Food",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "18%",
                lastYearGrowth: "15%",
            },
            {
                name: "Google",
                sector: "Technology",
                thisYearSales: "$ 1,800,000,000",
                lastYearSales: "$ 1,500,000,000",
                thisYearGrowth: "15%",
                lastYearGrowth: "13%",
            },
            {
                name: "Domino's",
                sector: "Food",
                thisYearSales: "$ 1,000,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "13%",
                lastYearGrowth: "14%",
            },
            {
                name: "Meta",
                sector: "Technology",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "11%",
                lastYearGrowth: "12%",
            },
            {
                name: "Snapchat",
                sector: "Technology",
                thisYearSales: "$ 1,500,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "16%",
                lastYearGrowth: "14%",
            },
            {
                name: "Tesla",
                sector: "AutoMobile",
                thisYearSales: "$ 1,300,000,000",
                lastYearSales: "$ 900,000,000",
                thisYearGrowth: "23%",
                lastYearGrowth: "16%",
            },
            {
                name: "Ford",
                sector: "AutoMobile",
                thisYearSales: "$ 700,000,000",
                lastYearSales: "$ 750,000,000",
                thisYearGrowth: "14%",
                lastYearGrowth: "15%",
            },
            {
                name: "Twitter",
                sector: "Technology",
                thisYearSales: "$ 1,200,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "19%",
                lastYearGrowth: "18%",
            }
        ];
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/table