Angular PrimeNG Table Methods
Last Updated :
28 Apr, 2025
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 are going to learn Angular PrimeNG Table Methods.
Angular PrimeNG Table is used to display data in tabular format. The methods have different functionality and we can alter the Table according to the use case.
Angular PrimeNG Table Methods:
- reset: This method resets the filtering.
- clearState: It clears the table state.
- exportCSV(config): This exports the table data in CSV format.
- scrollToVirtualIndex(index): It scrolls to the node with the given index when virtual scrolling is enabled.
- scrollTo(options): It scrolls to a position of a scrollable table viewport.
Syntax:
<p-table
[value]="data">
</p-table>
// In app.component.ts
this.table.reset();
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:
Example 1: In the following example, we have a simple Table and we reset the filter with a button click.
HTML
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Table Methods</h3>
<h5>Basic</h5>
<p-table
#dt [value]="tutorials"
dataKey="title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="0"
[globalFilterFields]="['title', 'category', 'rating']">
<ng-template pTemplate="caption">
<div class="table-header">
List of Tutorials
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input
pInputText type="text"
(input)="dt.filterGlobal($event.target.value, 'contains')"
placeholder="Global Search" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="title">
Title <p-sortIcon field="title"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category <p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="rating">
Rating <p-sortIcon field="rating"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-tutorial>
<tr class="p-selectable-row">
<td>
<p-tableCheckbox [value]="tutorial"></p-tableCheckbox>
</td>
<td>
<span class="p-column-title">
Title
</span>
{{ tutorial.title }}
</td>
<td>
<span class="p-column-title">
Category
</span>
<span class="image-text">
{{ tutorial.category }}
</span>
</td>
<td>
<span class="p-column-title">
Rating
</span>
<span class="image-text">
{{ tutorial.rating }}
</span>
</td>
</tr>
</ng-template>
</p-table>
<p-button
label="Reset"
(onClick)="handleClick($event)">
</p-button>
import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
tutorials: Tutorial[];
@ViewChild('dt') table: Table;
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.tutorials = [
{
title: 'Queue',
category: 'Data Structure',
rating: 4
},
{
title: 'Circularly LinkedList',
category: 'Data Structure',
rating: 5
},
{
title: 'Doubly LinkedList',
category: 'Data Structure',
rating: 3
},
{
title: 'Singly LinkedList',
category: 'Data Structure',
rating: 4
},
{
title: 'Doubly Ended Queue',
category: 'Data Structure',
rating: 5
},
{
title: 'Binary Search Tree',
category: 'Data Structure',
rating: 4
},
{
title: 'Red Black Tree',
category: 'Data Structure',
rating: 5
},
{
title: 'Breadth First Search',
category: 'Graph',
rating: 4
},
{
title: "Floyd's Cycle",
category: 'Algorithm',
rating: 4
},
{
title: 'Travelling Salesman Problem',
category: 'Algorithm',
rating: 5,
},
{
title: 'Bellman Ford',
category: 'Graph',
rating: 4
},
{
title: 'KMP Algorithm',
category: 'String',
rating: 5
},
];
this.primengConfig.ripple = true;
}
handleClick() {
this.table.reset();
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
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 { TableModule } from 'primeng/table';
import { CalendarModule } from 'primeng/calendar';
import { SliderModule } from 'primeng/slider';
import { DialogModule } from 'primeng/dialog';
import { MultiSelectModule } from 'primeng/multiselect';
import { ContextMenuModule } from 'primeng/contextmenu';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { InputTextModule } from 'primeng/inputtext';
import { ProgressBarModule } from 'primeng/progressbar';
import { DropdownModule } from 'primeng/dropdown';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
CalendarModule,
SliderModule,
DialogModule,
MultiSelectModule,
ContextMenuModule,
DropdownModule,
ButtonModule,
ToastModule,
InputTextModule,
ProgressBarModule,
HttpClientModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
Output:
Example 2: In the following example, we reset the scrolling of the table.
HTML
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Table Methods</h3>
<h5>Basic</h5>
<p-table
#dt [value]="tutorials"
dataKey="title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="0"
[globalFilterFields]="['title', 'category', 'rating']"
[scrollable]="true"
scrollHeight="200px">
<ng-template pTemplate="caption">
<div class="table-header">
List of Tutorials
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input
pInputText
type="text"
(input)="dt.filterGlobal($event.target.value, 'contains')"
placeholder="Global Search" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="title">
Title <p-sortIcon field="title"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category <p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="rating">
Rating <p-sortIcon field="rating"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-tutorial>
<tr class="p-selectable-row">
<td>
<p-tableCheckbox [value]="tutorial"></p-tableCheckbox>
</td>
<td>
<span class="p-column-title">
Title
</span>
{{ tutorial.title }}
</td>
<td>
<span class="p-column-title">
Category
</span>
<span class="image-text">
{{ tutorial.category }}
</span>
</td>
<td>
<span class="p-column-title">
Rating
</span>
<span class="image-text">
{{ tutorial.rating }}
</span>
</td>
</tr>
</ng-template>
</p-table>
<p-button
label="Reset Scrolling"
(onClick)="handleClick($event)">
</p-button>
import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
tutorials: Tutorial[];
@ViewChild('dt') table: Table;
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.tutorials = [
{
title: 'Queue',
category: 'Data Structure',
rating: 4
},
{
title: 'Circularly LinkedList',
category: 'Data Structure',
rating: 5
},
{
title: 'Doubly LinkedList',
category: 'Data Structure',
rating: 3
},
{
title: 'Singly LinkedList',
category: 'Data Structure',
rating: 4
},
{
title: 'Doubly Ended Queue',
category: 'Data Structure',
rating: 5
},
{
title: 'Binary Search Tree',
category: 'Data Structure',
rating: 4
},
{
title: 'Red Black Tree',
category: 'Data Structure',
rating: 5
},
{
title: 'Breadth First Search',
category: 'Graph',
rating: 4
},
{
title: "Floyd's Cycle",
category: 'Algorithm',
rating: 4
},
{
title: 'Travelling Salesman Problem',
category: 'Algorithm',
rating: 5,
},
{
title: 'Bellman Ford',
category: 'Graph',
rating: 4
},
{
title: 'KMP Algorithm',
category: 'String',
rating: 5
},
];
this.primengConfig.ripple = true;
}
handleClick() {
this.table.resetScrollTop();
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
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 { TableModule } from 'primeng/table';
import { CalendarModule } from 'primeng/calendar';
import { SliderModule } from 'primeng/slider';
import { DialogModule } from 'primeng/dialog';
import { MultiSelectModule } from 'primeng/multiselect';
import { ContextMenuModule } from 'primeng/contextmenu';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { InputTextModule } from 'primeng/inputtext';
import { ProgressBarModule } from 'primeng/progressbar';
import { DropdownModule } from 'primeng/dropdown';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
CalendarModule,
SliderModule,
DialogModule,
MultiSelectModule,
ContextMenuModule,
DropdownModule,
ButtonModule,
ToastModule,
InputTextModule,
ProgressBarModule,
HttpClientModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
Output:
Reference: https://primefaces.org/primeng/table
Similar Reads
Angular PrimeNG TreeTable Methods
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.
6 min read
Angular PrimeNG Tree Methods
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 designs, an extensive icon library, and much more.
5 min read
Angular PrimeNG Table Match modes
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.
6 min read
Angular PrimeNG Table Edit
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 Edit in Angular PrimeNG. Angular PrimeNG Table Edit e
5 min read
Angular PrimeNG Table Export
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.
6 min read
Angular PrimeNG Table Page
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. In this article, we will see how to use Table Page in Angular PrimeNG. Angular PrimeNG Table Page en
5 min read
Angular PrimeNG Table Component
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.
10 min read
Angular PrimeNG Table Basic
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 Basic in Angular PrimeNG. Angular PrimeNG Basic Table is
4 min read
Angular PrimeNG TreeTable Events
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.
7 min read
Angular PrimeNG Table Filter
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. In this article, we will see how to use Table Filtering in Angular PrimeNG. Angular PrimeNG Table Fi
4 min read