Angular PrimeNG Table Expandable Rows

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 Table Expandable Rows.

The Expandable Rows in the Table are used to display some extra details with each and every entry as putting all the values in columns is not always a good display and view of the application. Instead, we can we each and every entry individually with more data. The following directives can be used for the Table Expandable Rows, which are described below:

• pRowToggler: It is the directive whose value is the row data instance on an element of your choice whose click event toggles the expansion.
• pRowTogglerDisabled: By setting this as true will disables the toggle event for the element

Syntax:

<ng-template pTemplate="rowexpansion" 
             let-rowData let-columns="columns">
    <tr>
        <td [attr.colspan]="columns.length + 1">
            <div class="grid p-fluid">
                <div class="col-12 md-9">
                    <div class="grid">
                        <div class="col-12">
                            <b>Title:</b> 
                                {{ rowData.title }}
                        </div>
                        <div class="col-12">
                            <b>Category:</b> 
                                {{ rowData.category }}
                        </div>
                        <div class="col-12">
                            <b>Rating:</b> 
                                {{ rowData.rating }}
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</ng-template>

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:

Example 1: This example illustrates the basic usage of the Table Expandable Rows in Angular PrimeNG, where we have a Table with filters.

• app.component.html

HTML

<h1 style="color:green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Table Expandable Rows
</h3>

<p-table [columns]="cols"
         [value]="tutorials"
         dataKey="vin">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width: 2.25em"></th>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body"
                 let-rowData let-expanded="expanded"
                 let-columns="columns">
        <tr>
            <td>
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded
                ? 'pi pi-fw pi-chevron-circle-down'
                : 'pi pi-fw pi-chevron-circle-right'"></i>
                </a>
            </td>
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion"
                 let-rowData let-columns="columns">
        <tr>
            <td [attr.colspan]="columns.length + 1">
                <div class="grid p-fluid"
                     style="font-size:16px;
                            padding:20px">
                    <div class="col-12 md-9">
                        <div class="grid">
                            <div class="col-12">
                                    <b>Title:</b>
                                        {{ rowData.title }}
                            </div>
                            <div class="col-12">
                                    <b>Category:</b>
                                        {{ rowData.category }}
                            </div>
                            <div class="col-12">
                                    <b>Rating:</b>
                                        {{ rowData.rating }}
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </ng-template>
</p-table>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { SelectItem,
         FilterService,
         FilterMatchMode }
    from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    cols: any[];
    tutorials: Tutorial[];
    matchModeOptions: SelectItem[];

    constructor(private filterService: FilterService) { }

    ngOnInit() {
        this.tutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];

        this.cols = [
            { field: 'title', header: 'Title' },
            { field: 'category', header: 'Category' },
            { field: 'rating', header: 'Rating' },
        ];

        this.matchModeOptions = [
            { label: 'Starts With', value: FilterMatchMode.STARTS_WITH },
            { label: 'Contains', value: FilterMatchMode.CONTAINS },
            { label: 'Ends With', value: FilterMatchMode.ENDS_WITH },
            { label: 'Equals', value: FilterMatchMode.EQUALS },
        ];
    }
}

export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

• app.module.ts

Javascript

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: In the following example, the toggling is disabled using the pRowTogglerDisabled as true.

• app.component.html

HTML

<h1 style="color:green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Table Expandable Rows
</h3>

<p-table [columns]="cols"
         [value]="tutorials"
         dataKey="vin"
         [responsive]="true">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width: 2.25em"></th>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body"
                 let-rowData let-expanded="expanded"
                 let-columns="columns">
        <tr>
            <td>
                <a href="#" [pRowToggler]="rowData"
                            [pRowTogglerDisabled]="true">
                    <i [ngClass]="expanded
                                ? 'pi pi-fw pi-chevron-circle-down'
                                : 'pi pi-fw pi-chevron-circle-right'">
                    </i>
                </a>
            </td>
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion"
                 let-rowData let-columns="columns">
        <tr>
            <td [attr.colspan]="columns.length + 1">
                <div class="grid p-fluid"
                     style="font-size:16px;
                            padding:20px">
                    <div class="col-12 md-9">
                        <div class="grid">
                            <div class="col-12">
                                <b>Title:</b>
                                    {{ rowData.title }}
                            </div>
                            <div class="col-12">
                                <b>Category:</b>
                                    {{ rowData.category }}
                            </div>
                            <div class="col-12">
                                <b>Rating:</b>
                                    {{ rowData.rating }}
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </ng-template>
</p-table>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { SelectItem, FilterService, FilterMatchMode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    cols: any[];
    tutorials: Tutorial[];
    matchModeOptions: SelectItem[];

    constructor(private filterService: FilterService) { }

    ngOnInit() {
        this.tutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];

        this.cols = [
            { field: 'title', header: 'Title' },
            { field: 'category', header: 'Category' },
            { field: 'rating', header: 'Rating' },
        ];

        this.matchModeOptions = [
            { label: 'Starts With', value: FilterMatchMode.STARTS_WITH },
            { label: 'Contains', value: FilterMatchMode.CONTAINS },
            { label: 'Ends With', value: FilterMatchMode.ENDS_WITH },
            { label: 'Equals', value: FilterMatchMode.EQUALS },
        ];
    }
}

export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

• app.module.ts

Javascript

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: https://primefaces.org/primeng/table