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 Properties.
Angular PrimeNG Table is used to display data in tabular format. The properties have a lot of functionality and we can add and remove different features to use them accordingly.
Angular PrimeNG Table Properties:
- value(array): It is an array of objects to display.
- columns(array): It is an array of objects to represent dynamic columns.
- frozenColumns(array): It is an array of objects to represent dynamic columns that are frozen.
- frozenValue(array): It is an array of objects to display as frozen.
- responsiveLayout(string): It defines the responsive mode, valid options are stack and scroll. The default value is stack.
- breakpoint(string): It is the breakpoint to define the maximum width boundary when using a stack responsive layout. The default value is 960px.
- style(string): It is the inline style of the component.
- styleClass(string): It is the style class of the component.
- tableStyle(any): It is the inline style of the table.
- tableStyleClass(string): null Style class of the table.
- paginator(boolean): If set to true it enables the pagination. The default value is false.
- rows(number): It is the number of rows to display per page.
- first(number): It is the index of the first row to be displayed. The default value is 0.
- totalRecords(number): It is the number of total records, and defaults to the length of value when not defined.
- pageLinks(number): It is the number of page links to display in the paginator.
- rowsPerPageOptions(array): It is an array of integer/object values to display inside the rows per page dropdown of the paginator.
- alwaysShowPaginator(boolean): If set to true, it shows only one page. The default value is true.
- showFirstLastIcon(boolean): If set to true, the icons are displayed on the paginator to go first and the last page. The default value is true.
- paginatorPosition(string): It sets the position of the paginator, options are top, bottom, or both. The default value is the bottom.
- currentPageReportTemplate(string): It is the template of the current page report element.
- showCurrentPageReport(boolean): It sets whether to display the current page report. The default value is false.
- showJumpToPageDropdown(boolean): It sets whether to display a dropdown to navigate to any page. The default value is false.
- showJumpToPageInput(boolean): It sets whether to display input to navigate to any page. The default value is false.
- showPageLinks(boolean): It sets whether to show page links. The default value is true.
- sortMode(string): It defines whether sorting works on a single column or on multiple columns. The default value is single
- sortField(string): It sets the name of the field to sort data by default.
- sortOrder(number): It sets the order to sort when default sorting is enabled. The default value is 1.
- multiSortMeta(array): It is an array of SortMeta objects to sort the data by default in multiple sort mode.
- rowGroupMode(string): It is the type of row grouping, valid values are subheader and rowspan.
- groupRowsBy(string): It is one or more field names to use in row grouping.
- groupRowsByOrder(number): It sets the order to sort when default row grouping is enabled. The default value is 1.
- defaultSortOrder(number): It sets the sort order to use when an unsorted column gets sorted by user interaction. The default value is 1.
- customSort(boolean): It sets whether to use the default sorting or a custom one using sortFunction. The default value is false.
- showInitialSortBadge(boolean): It sets whether to use the initial sort badge or not. The default value is true.
- sortFunction(function): It is the function to implement custom sorting, refer to the sorting section for details.
- selectionMode(string): It specifies the selection mode, valid values are single and multiple.
- selection(any): It sets the selected row in a single mode or an array of values in multiple modes.
- selectionPageOnly(boolean): It sets when enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page. The default value is false.
- selectAll(boolean): It sets whether all data is selected. The default value is false.
- contextMenuSelection(any): It sets the selected row with a context menu.
- contextMenuSelectionMode(string): It defines the behaviour of context menu selection, in separate mode context menu updates contextMenuSelection property. The default value is separate.
- dataKey(string): It is a property to uniquely identify a record in data.
- metaKeySelection(boolean): It defines whether metaKey should be considered for the selection. The default value is true.
- rowSelectable(function): It is a function to decide whether a row is selectable. It returns a boolean value.
- rowTrackBy(Function): It sets the function to optimize the dom operations by delegating to ngForTrackBy.
- lazy(boolean): It defines if data is loaded and interacted with in a lazy manner. The default value is false.
- lazyLoadOnInit(boolean): It sets whether to call lazy loading on initialization. The default value is true
- compareSelectionBy(string): It is the algorithm to define if a row is selected, valid values are equals that compare by reference and deepEquals that compares all fields. The default value is deepEquals.
- csvSeparator(string): It sets the character to use as the CSV separator. The default value is , .
- exportFilename(string): It sets the name of the exported file. The default value is download.
- filters(array): It is an array of FilterMetadata objects to provide external filters.
- filterDelay(number): It is the delay in milliseconds before filtering the data. The default value is 300.
- globalFilterFields array null An array of fields as a string to use in global filtering.
- filterLocale(string): It is the locale to use in filtering. The default locale is the host environment’s current locale.
- expandedRowKeys(any): It maps instances to keep the expanded rows where the key of the map is the data key of the row.
- rowExpandMode(string): It sets whether multiple rows can be expanded at any time. The default value is single.
- scrollable(boolean): If set to true, enable horizontal and/or vertical scrolling. The default value is false.
- scrollDirection(string): It sets the orientation of the scrolling, options are vertical, horizontal and both. The default value is vertical.
- scrollHeight(string): It sets the height of the scroll viewport in fixed pixels.
- virtualScroll(boolean): It sets whether the data should be loaded on demand during the scroll. The default value is false.
- virtualScrollDelay(number): It sets the threshold in milliseconds to delay lazy loading during scrolling. The default value is 250.
- virtualScrollItemSize(number): Height of a row to use in calculations of virtual scrolling. The default value is 28.
- virtualScrollOptions(ScrollerOptions): It sets whether to use the scroller feature.
- contextMenu(ContextMenu): It sets the local ng-template variable of a ContextMenu.
- resizableColumns(boolean): If set to true, columns can be resized using drag and drop. The default value is false.
- columnResizeMode(string): It defines whether the overall table width should change on column resize, valid values are fit, and expand. The default value is fit.
- reorderableColumns(boolean): If set to true, columns can be reordered using drag and drop. The default value is false.
- loading(boolean): If set to true, it displays a loader to indicate data load is in progress. The default value is false.
- loadingIcon(string): It is the icon to show while indicating data load is in progress.
- showLoader(boolean): It sets whether to show the loading mask when the loading property is true. The default value is false.
- rowHover(boolean): It adds a hover effect to rows without the need for selectionMode. The default value is false.
- paginatorDropdownAppendTo(any): It sets the target element to attach the paginator dropdown overlay.
- paginatorDropdownScrollHeight(string): It sets the paginator dropdown height of the viewport in pixels. The default value is 200px.
- autoLayout(boolean): It sets whether the cell widths scale according to their content or not. The default value is false.
- resetPageOnSort(boolean): If set to true, resets the paginator to the first page after sorting. The default value is true.
- exportFunction(function): It is a function to implement custom export.
- stateKey(string): It is a unique identifier of a stateful table to use in state storage.
- stateStorage(string): It defines where a stateful table keeps its state, valid values are session for sessionStorage and local for localStorage. The default value is session.
- editMode(string): It defines the editing mode, valid values are cell and row.
- editingRowKeys(any): It maps the instance to keep the rows being edited where the key of the map is the data key of the row.
- exportHeader(string): It sets the custom export header of the column to be exported as CSV.
Syntax:
<p-table [value]="tutorials"
[rowHover]="true"
[scrollable]="true">
...
</p-table>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.
Steps to run the application: Run the app using the below command:
ng serve --open
Example 1: In the following example, we have a Table with a row highlight
- app.component.html
HTML
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Table Properties
</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>
|
- app.component.ts
Javascript
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;
}
}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 { 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 have changed the filter delay to 1000ms.
- app.component.html
HTML
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<h3>
Angular PrimeNG Table Properties
</h3>
<h5>Basic</h5>
<p-table #dt [value]="tutorials"
dataKey="title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="1000"
[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>
|
- app.component.ts
Javascript
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;
}
}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 { 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