Angular PrimeNG Table Scrolling

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 Table Scrolling in Angular PrimeNG.

Angular PrimeNG Table Scrolling is used to make the Table component scrollable. Scrolling makes the Table component more interactive and responsive on devices with different screen sizes. Adding the virtualScroll mode that helps to enable dealing with the large dataset, in order to display the data on demand while scrolling.

Angular PrimeNG Table Scrolling Properties:

• value: It is the array of the object to display in the table. The default value is null.
• scrollable: This boolean attribute specifies whether to enable the horizontal and/or vertical scrolling of the table. The default value is false.
• scrollHeight: It specifies the height of the scroll viewport. It can be a fixed value in pixels or “flex” can be passed for dynamic size.

Syntax:

<p-table 
    [value]="..." 
    [scrollable]="true" 
    scrollHeight="...px">
</p-table>

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:

Project Structure

Example 1: Below is a simple example demonstrating the use of Angular PrimeNG Table Scrolling.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Scrolling</h4>

<p-table
    [value]="tableData"
    [scrollable]="true"
    scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-people>
        <tr>
            <td>
                {{ people.firstname }}
            </td>
            <td>
                {{ people.lastname }}
            </td>
            <td>
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

app.component.ts

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

interface People {
  firstname?: string;
  lastname?: string;
  age?: string;
}

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

  ngOnInit() {
    this.cols = [
      { field: "firstname", header: "First Name" },
      { field: "lastname", header: "Last Name" },
      { field: "age", header: "Age" },
    ];
    this.tableData = [
      {
        firstname: "David",
        lastname: "ace",
        age: "40",
      },
      {
        firstname: "AJne",
        lastname: "west",
        age: "40",
      },
      {
        firstname: "Mak",
        lastname: "Lame",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
    ];
  }
}

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";
import { MultiSelectModule } from "primeng/multiselect";

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

Output:

Example 2: Below is another example demonstrating the use of Angular PrimeNG Table Scrolling, where we are utilizing the horizontal scroll.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Scrolling</h4>

<p-table
    [value]="tableData"
    [scrollable]="true"
    [style]="{ width: '600px' }">
    <ng-template pTemplate="header">
        <tr>
            <th [style]="{ width: '300px' }">
                First Name
            </th>
            <th [style]="{ width: '300px' }">
                Last Name
            </th>
            <th [style]="{ width: '300px' }">
                Age
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-people>
        <tr>
            <td>
                {{ people.firstname }}
            </td>
            <td pEditableColumn>
                {{ people.lastname }}
            </td>
            <td pEditableColumn>
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

app.component.ts

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

interface People {
    firstname?: string;
    lastname?: string;
    age?: string;
}

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

    ngOnInit() {
        this.cols = [
            { field: 'firstname', header: 'First Name' },
            { field: 'lastname', header: 'Last Name' },
            { field: 'age', header: 'Age' },
        ];
        this.tableData = [
            {
                firstname: 'David',
                lastname: 'ace',
                age: '40',
            },
            {
                firstname: 'AJne',
                lastname: 'west',
                age: '40',
            },
            {
                firstname: 'Mak',
                lastname: 'Lame',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
        ];
    }
}

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";
import { MultiSelectModule } from "primeng/multiselect";

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

Output:

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