Angular PrimeNG DataTable Dynamic Columns (2024) Example

Overview

We demonstrated Angular PrimeNG DataTable in the previous tutorial. We'll use the same example and change the source code to make the datatable columns dynamic.

We will follow below steps to build this example

1. First we will create an Angular Project
2. We will Setup PrimeNG
3. Adding the PrimeNG DataTable Component
4. Finally we will test with data

Angular PrimeNG DataTable Dynamic Columns Project Structure:

Flight Model

Since our Angular application will fetch from and persist Flight entities in the database, let's implement a simple domain model flight with TypeScript.

Let's open a terminal console and create a model directory and then and within that directory, issue the following command:

ng generate class flight

Here is code for our my flight Model

export interface Flight{
    flightNumber : string;
    origin : string;
    destination : string;
}

Flight service

ng generate service flight

Here is code for flight service, will use getFlightJsonData method to load the data for dynamic datatable columns.

import { Injectable } from '@angular/core';
import { Flight } from "../model/flight";
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from "rxjs";

@Injectable()
export class FlightsService {

  // for testing mock data
  private MYFLIGHTS: Flight[] = [
    {"flightNumber" : "FS1298", "origin": "LAX", "destination" : "LHR"},
    {"flightNumber" : "FS1201", "origin": "LAX", "destination" : "LHR"},
  ];

  constructor(private http: HttpClient) { }

// get json data for dynamic table example
public getFlightJsonData() {
  return this.http.get<any>('assets/flights.json')
    .toPromise()
    .then(res => <Flight[]>res.data)
    .then(data => { return data; });
  }

  // to test with local mock data
  public getFlightsMockData() : Flight[]{
    return this.MYFLIGHTS;
  }

  // use this method to get data from backend service to load dynamic data from database
  public getFlightsData() : Observable<Flight[]>{
    let url = "http://localhost:8080/flights";
    return this.http.get<Flight[]>(url);
  }

}

Component

We will be creating My Flights Component which will fetch data from spring boot service and display it later.
Lets begin with the My Flights component Open a command prompt and use the following command-

ng generate component my-flights

Here is code for our my flight template component my-flights.component.html

<p-table [columns]="flightCols" [value]="flights">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowflight let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowflight[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

my-flights.component.ts is our component source.

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

import {Flight} from '../model/flight';
import { FlightsService } from 'src/app/service/flights.service';

@Component({
  selector: 'app-my-flights',
  templateUrl: './my-flights.component.html',
  styleUrls: ['./my-flights.component.scss']
})
export class MyFlightsComponent implements OnInit {
  public flights : Flight[] = [];

  public flightCols: any[] = [];

  constructor(private flightService: FlightsService) {}

  ngOnInit() {

    this.flightService.getFlightJsonData().
      then(flights => this.flights = flights);

      this.flightCols = [
        { field: 'flightNumber', header: 'Flight' },
        {field: 'origin', header: 'From' },
        { field: 'destination', header: 'To' }
    ];

    // this.flights = this.flightService.getFlightsMockData();
    //this.getFlightsData();
  }

  // get the data from backend service api
  private getFlightsData() {
    this.flightService.getFlightsData().subscribe(data => {
      this.flights = data;
    });
  }
}

Test Angular PrimeNG DataTable Dynamic Columns

1. Run the application by using below command:

   npm serve

2. By default application will open in browser at http://localhost:4200/ and it will load the data dynamically in the datatable columns. url.

Next we will see Angular PrimeNG Datatable Paginator Example.

Download Source Code

The full source code for this article can be found on below.
Download it here - Angular PrimeNG DataTable Dynamic Columns Example