Table
Table displays data in tabular format.
Import #
import { TableModule } from 'primeng/table';
Basic #
DataTable requires a collection to display along with column components for the representation of the data.
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{ product.code }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.quantity }}</td>
</tr>
</ng-template>
</p-table>
Dynamic Columns #
Columns can be defined dynamically using the *ngFor directive.
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [columns]="cols" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{ col.header }}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-table>
Template #
Custom content at header, body and footer sections are supported via templating.
Products
| Name | Image | Price | Category | Reviews | Status |
|---|---|---|---|---|---|
| Bamboo Watch |  | $65.00 | Accessories | ||
| Black Watch |  | $72.00 | Accessories | ||
| Blue Band |  | $79.00 | Fitness | ||
| Blue T-Shirt |  | $29.00 | Clothing | ||
| Bracelet |  | $15.00 | Accessories |
<p-table [value]="products" [tableStyle]="{'min-width': '60rem'}">
<ng-template pTemplate="caption">
<div class="flex align-items-center justify-content-between">
Products
<p-button icon="pi pi-refresh"></p-button>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Image</th>
<th>Price</th>
<th>Category</th>
<th>Reviews</th>
<th>Status</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{product.name}}</td>
<td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
<td>{{product.price | currency:'USD'}}</td>
<td>{{product.category}}</td>
<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
<td><p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag></td>
</tr>
</ng-template>
<ng-template pTemplate="summary">
<div class="flex align-items-center justify-content-between">
In total there are {{products ? products.length : 0 }} products.
</div>
</ng-template>
</p-table>
Size #
In addition to a regular table, alternatives with alternative sizes are available.
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<div class="flex justify-content-center mb-3">
<p-selectButton [options]="sizes" [(ngModel)]="selectedSize" [multiple]="false" optionLabel="name" optionValue="class"></p-selectButton>
</div>
<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }" [styleClass]="selectedSize.class">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{ product.code }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.quantity }}</td>
</tr>
</ng-template>
</p-table>
Grid Lines #
Adding p-datatable-gridlines class displays grid lines.
Header
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="caption"> Header </ng-template>
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{ product.code }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.quantity }}</td>
</tr>
</ng-template>
<ng-template pTemplate="summary"> Footer </ng-template>
</p-table>
Striped Rows #
Adding p-datatable-striped class displays striped rows.
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" styleClass="p-datatable-striped" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Style #
Certain rows or cells can easily be styled based on conditions.
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr [ngClass]="{'row-accessories': product.category === 'Accessories'}">
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>
<div [ngClass]="{'outofstock': product.quantity === 0, 'lowstock': (product.quantity > 0 && product.quantity < 10),'instock': product.quantity > 10}">
{{product.quantity}}
</div>
</td>
</tr>
</ng-template>
</p-table>
Responsive #
| Name | Price | Category | Quantity | Status | Reviews |
|---|---|---|---|---|---|
| Bamboo Watch | $65.00 | Accessories | 24 | ||
| Black Watch | $72.00 | Accessories | 61 | ||
| Blue Band | $79.00 | Fitness | 2 | ||
| Blue T-Shirt | $29.00 | Clothing | 25 | ||
| Bracelet | $15.00 | Accessories | 73 |
<p-table [value]="products" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header" let-columns>
<tr>
<th>Name </th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Status</th>
<th>Reviews</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product let-columns="columns">
<tr>
<td>{{product.name}}</td>
<td>{{product.price | currency:'USD'}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
<td><p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag></td>
<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
</tr>
</ng-template>
</p-table>
Stack #
In stack layout, columns are displayed as stacked after a certain breakpoint. Default is '960px' as max-width. This feature is enabled by setting responsiveLayout to stack and adding an element with p-column-title style class to the body cells.
| Name | Price | Category | Quantity | Status | Reviews |
|---|---|---|---|---|---|
| NameBamboo Watch | Price$65.00 | CategoryAccessories | Quantity24 | Reviews | |
| NameBlack Watch | Price$72.00 | CategoryAccessories | Quantity61 | Reviews | |
| NameBlue Band | Price$79.00 | CategoryFitness | Quantity2 | Reviews | |
| NameBlue T-Shirt | Price$29.00 | CategoryClothing | Quantity25 | Reviews | |
| NameBracelet | Price$15.00 | CategoryAccessories | Quantity73 | Reviews |
<p-table [value]="products" responsiveLayout="stack" [breakpoint]="'960px'" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header" let-columns>
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Status</th>
<th>Reviews</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product let-columns="columns">
<tr>
<td><span class="p-column-title">Name</span>{{product.name}}</td>
<td><span class="p-column-title">Price</span>{{product.price | currency:'USD'}}</td>
<td><span class="p-column-title">Category</span>{{product.category}}</td>
<td><span class="p-column-title">Quantity</span>{{product.quantity}}</td>
<td><p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag></td>
<td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
</tr>
</ng-template>
</p-table>
Paginator #
| Name | Country | Company | Representative |
|---|---|---|---|
| James Butt | Algeria | Benton, John B Jr | Ioni Bowcher |
| Josephine Darakjy | Egypt | Chanay, Jeffrey A Esq | Amy Elsner |
| Art Venere | Panama | Chemel, James L Cpa | Asiya Javayant |
| Lenna Paprocki | Slovenia | Feltz Printing Service | Xuxue Feng |
| Donette Foller | South Africa | Printing Dimensions | Asiya Javayant |
<p-table
[value]="customers"
[paginator]="true"
[rows]="5"
[showCurrentPageReport]="true"
[tableStyle]="{ 'min-width': '50rem' }"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[rowsPerPageOptions]="[10, 25, 50]"
>
<ng-template pTemplate="header">
<tr>
<th style="width:25%">Name</th>
<th style="width:25%">Country</th>
<th style="width:25%">Company</th>
<th style="width:25%">Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{{ customer.name }}</td>
<td>{{ customer.country.name }}</td>
<td>{{ customer.company }}</td>
<td>{{ customer.representative.name }}</td>
</tr>
</ng-template>
<ng-template pTemplate="paginatorleft">
<p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
</ng-template>
<ng-template pTemplate="paginatorright">
<p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
</ng-template>
</p-table>
Locale #
paginator localization information such as page numbers and rows per page options are defined with the paginatorLocale property which defaults to the user locale.
| Name | Country | Company | Representative |
|---|---|---|---|
| James Butt | Algeria | Benton, John B Jr | Ioni Bowcher |
| Josephine Darakjy | Egypt | Chanay, Jeffrey A Esq | Amy Elsner |
| Art Venere | Panama | Chemel, James L Cpa | Asiya Javayant |
| Lenna Paprocki | Slovenia | Feltz Printing Service | Xuxue Feng |
| Donette Foller | South Africa | Printing Dimensions | Asiya Javayant |
<p-table
[value]="customers"
[paginator]="true"
[rows]="5"
[showCurrentPageReport]="true"
[tableStyle]="{ 'min-width': '50rem' }"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[rowsPerPageOptions]="[10, 25, 50]"
paginatorLocale="fa-IR"
>
<ng-template pTemplate="header">
<tr>
<th style="width:25%">Name</th>
<th style="width:25%">Country</th>
<th style="width:25%">Company</th>
<th style="width:25%">Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{{ customer.name }}</td>
<td>{{ customer.country.name }}</td>
<td>{{ customer.company }}</td>
<td>{{ customer.representative.name }}</td>
</tr>
</ng-template>
<ng-template pTemplate="paginatorleft">
<p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
</ng-template>
<ng-template pTemplate="paginatorright">
<p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
</ng-template>
</p-table>
Programmatic #
Paginator can also be controlled via model using a binding to the first property where changes trigger a pagination.
| Name | Country | Company | Representative |
|---|---|---|---|
| James Butt | Algeria | Benton, John B Jr | Ioni Bowcher |
| Josephine Darakjy | Egypt | Chanay, Jeffrey A Esq | Amy Elsner |
| Art Venere | Panama | Chemel, James L Cpa | Asiya Javayant |
| Lenna Paprocki | Slovenia | Feltz Printing Service | Xuxue Feng |
| Donette Foller | South Africa | Printing Dimensions | Asiya Javayant |
| Simona Morasca | Egypt | Chapman, Ross E Esq | Ivan Magalhaes |
| Mitsue Tollner | Paraguay | Morlong Associates | Ivan Magalhaes |
| Leota Dilliard | Serbia | Commercial Press | Onyama Limba |
| Sage Wieser | Egypt | Truhlar And Truhlar Attys | Ivan Magalhaes |
| Kris Marrier | Mexico | King, Christopher A Esq | Onyama Limba |
Showing 1 to 10 of 200 entries
<div class="mb-3">
<p-button type="button" icon="pi pi-chevron-left" (click)="prev()" [disabled]="isFirstPage()" styleClass="p-button-text"></p-button>
<p-button type="button" icon="pi pi-refresh" (click)="reset()" styleClass="p-button-text"></p-button>
<p-button type="button" icon="pi pi-chevron-right" (click)="next()" [disabled]="isLastPage()" styleClass="p-button-text"></p-button>
</div>
<p-table
[value]="customers"
[paginator]="true"
[rows]="5"
[showCurrentPageReport]="true"
[tableStyle]="{ 'min-width': '50rem' }"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
(onPage)="pageChange($event)"
[rowsPerPageOptions]="[10, 25, 50]"
>
<ng-template pTemplate="header">
<tr>
<th style="width:25%">Name</th>
<th style="width:25%">Country</th>
<th style="width:25%">Company</th>
<th style="width:25%">Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{{ customer.name }}</td>
<td>{{ customer.country.name }}</td>
<td>{{ customer.company }}</td>
<td>{{ customer.representative.name }}</td>
</tr>
</ng-template>
<ng-template pTemplate="paginatorleft">
<p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
</ng-template>
<ng-template pTemplate="paginatorright">
<p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
</ng-template>
</p-table>
Sort #
| Code | Name | Category | Quantity | Price |
|---|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 | $65.00 |
| nvklal433 | Black Watch | Accessories | 61 | $72.00 |
| zz21cz3c1 | Blue Band | Fitness | 2 | $79.00 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 | $29.00 |
| h456wer53 | Bracelet | Accessories | 73 | $15.00 |
<p-table [value]="products" [tableStyle]="{'min-width': '60rem'}">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="code" style="width:20%">Code <p-sortIcon field="code"></p-sortIcon></th>
<th pSortableColumn="name" style="width:20%">Name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="category" style="width:20%">Category <p-sortIcon field="category"></p-sortIcon></th>
<th pSortableColumn="quantity" style="width:20%">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
<th pSortableColumn="price" style="width:20%">Price <p-sortIcon field="price"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price | currency: 'USD'}}</td>
</tr>
</ng-template>
</p-table>
Custom Sort #
Instead of using the built-in sorting algorithm a custom sort can be attached by enabling customSort property and defining a sortFunction implementation. This function gets a SortEvent instance that provides the data to sort, sortField, sortOrder and multiSortMeta.
| Code | Name | Category | Quantity | Price |
|---|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 | $65.00 |
| nvklal433 | Black Watch | Accessories | 61 | $72.00 |
| zz21cz3c1 | Blue Band | Fitness | 2 | $79.00 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 | $29.00 |
| h456wer53 | Bracelet | Accessories | 73 | $15.00 |
<p-table [value]="products" (sortFunction)="customSort($event)" [customSort]="true" [tableStyle]="{'min-width': '60rem'}">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="code" style="width:20%">Code <p-sortIcon field="code"></p-sortIcon></th>
<th pSortableColumn="name" style="width:20%">Name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="category" style="width:20%">Category <p-sortIcon field="category"></p-sortIcon></th>
<th pSortableColumn="quantity" style="width:20%">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
<th pSortableColumn="price" style="width:20%">Price <p-sortIcon field="price"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price | currency: 'USD'}}</td>
</tr>
</ng-template>
</p-table>
Filter #
Name | Country | Agent | Date | Balance | Status | Activity | Verified |
|---|---|---|---|---|---|---|---|
| James Butt |  Algeria |  Ioni Bowcher | 09/13/2015 | $70,663.00 | |||
| Josephine Darakjy | Egypt |  Amy Elsner | 02/09/2019 | $82,429.00 | |||
| Art Venere | Panama |  Asiya Javayant | 05/13/2017 | $28,334.00 | |||
| Lenna Paprocki | Slovenia |  Xuxue Feng | 09/15/2020 | $88,521.00 | |||
| Donette Foller | South Africa | Asiya Javayant | 05/20/2016 | $93,905.00 | |||
| Simona Morasca | Egypt |  Ivan Magalhaes | 02/16/2018 | $50,041.00 | |||
| Mitsue Tollner | Paraguay | Ivan Magalhaes | 02/19/2018 | $58,706.00 | |||
| Leota Dilliard | Serbia |  Onyama Limba | 08/13/2019 | $26,640.00 | |||
| Sage Wieser | Egypt | Ivan Magalhaes | 11/21/2018 | $65,369.00 | |||
| Kris Marrier | Mexico | Onyama Limba | 07/07/2015 | $63,451.00 |
Showing 1 to 10 of 200 entries
<p-table
#dt1
[value]="customers"
dataKey="id"
[rows]="10"
[showCurrentPageReport]="true"
[rowsPerPageOptions]="[10, 25, 50]"
[loading]="loading"
[paginator]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
>
<ng-template pTemplate="caption">
<div class="flex">
<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
<span class="p-input-icon-left ml-auto">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="min-width:15rem">
<div class="flex align-items-center">
Name
<p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
</div>
</th>
<th style="min-width:15rem">
<div class="flex align-items-center">
Country
<p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
</div>
</th>
<th style="min-width:15rem">
<div class="flex align-items-center">
Agent
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header">
<div class="px-3 pt-3 pb-0">
<span class="font-bold">Agent Picker</span>
</div>
</ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="inline-block vertical-align-middle">
<img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
<span class="ml-1 mt-1">{{ option.name }}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="min-width:10rem">
<div class="flex align-items-center">
Date
<p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
</div>
</th>
<th style="min-width:10rem">
<div class="flex align-items-center">
Balance
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
</div>
</th>
<th style="min-width:10rem">
<div class="flex align-items-center">
Status
<p-columnFilter field="status" matchMode="equals" display="menu">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
<ng-template let-option pTemplate="item">
<p-tag [value]="option.value" [severity]="getSeverity(option.label)"></p-tag>
</ng-template>
</p-dropdown>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="min-width:10rem">
<div class="flex align-items-center">
Activity
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="filter" let-filter="filterCallback">
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
<div class="flex align-items-center px-2">
<span>{{ activityValues[0] }}</span>
<span>{{ activityValues[1] }}</span>
</div>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="width: 3rem">
<div class="flex align-items-center">
Verified
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>
{{ customer.name }}
</td>
<td>
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
<span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
</td>
<td>
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
<span class="ml-1 vertical-align-middle">{{ customer.representative.name }}</span>
</td>
<td>
{{ customer.date | date: 'MM/dd/yyyy' }}
</td>
<td>
{{ customer.balance | currency: 'USD':'symbol' }}
</td>
<td>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
</td>
<td>
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
</td>
<td class="text-center">
<i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': customer.verified, 'text-red-500 pi-times-circle': !customer.verified }"></i>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="7">No customers found.</td>
</tr>
</ng-template>
</p-table>
Filter Row #
Filters are displayed inline within a separate row.
| Name | Country | Agent | Status | Verified |
|---|---|---|---|---|
Any | Any | |||
| James Butt | Algeria | Ioni Bowcher | ||
| Josephine Darakjy | Egypt | Amy Elsner | ||
| Art Venere | Panama | Asiya Javayant | ||
| Lenna Paprocki | Slovenia | Xuxue Feng | ||
| Donette Foller | South Africa | Asiya Javayant | ||
| Simona Morasca | Egypt | Ivan Magalhaes | ||
| Mitsue Tollner | Paraguay | Ivan Magalhaes | ||
| Leota Dilliard | Serbia | Onyama Limba | ||
| Sage Wieser | Egypt | Ivan Magalhaes | ||
| Kris Marrier | Mexico | Onyama Limba |
Showing 1 to 10 of 200 entries
<p-table
#dt2
[value]="customers"
dataKey="id"
[rows]="10"
[showCurrentPageReport]="true"
[rowsPerPageOptions]="[10, 25, 50]"
[loading]="loading"
[paginator]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
[tableStyle]="{ 'min-width': '75rem' }"
>
<ng-template pTemplate="caption">
<div class="flex">
<span class="p-input-icon-left ml-auto">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width:22%">Name</th>
<th style="width:22%">Country</th>
<th style="width:22%">Agent</th>
<th style="width:22%">Status</th>
<th style="width:12%">Verified</th>
</tr>
<tr>
<th>
<p-columnFilter type="text" field="name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="country.name"></p-columnFilter>
</th>
<th>
<p-columnFilter field="representative" matchMode="in" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="inline-block vertical-align-middle">
<img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
<span class="ml-1 mt-1">{{ option.name }}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</th>
<th>
<p-columnFilter field="status" matchMode="equals" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [showClear]="true">
<ng-template let-option pTemplate="item">
<p-tag [value]="option.value" [severity]="getSeverity(option.label)"></p-tag>
</ng-template>
</p-dropdown>
</ng-template>
</p-columnFilter>
</th>
<th>
<p-columnFilter type="boolean" field="verified"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>
{{ customer.name }}
</td>
<td>
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
<span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
</td>
<td>
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
<span class="ml-1 vertical-align-middle">{{ customer.representative.name }}</span>
</td>
<td>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
</td>
<td>
<i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': customer.verified, 'text-red-500 pi-times-circle': !customer.verified }"></i>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="5">No customers found.</td>
</tr>
</ng-template>
</p-table>
Row Selection #
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr [pSelectableRow]="product">
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Multiple Selection #
In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. Setting metaKeySelection property as false enables multiple selection without meta key.
Multiple Selection with MetaKey
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<div class="flex justify-content-center align-items-center gap-2 mb-3">
<p-inputSwitch inputId="metakey" [(ngModel)]="metaKeySelection" label="MetaKey"></p-inputSwitch>
<span>MetaKey</span>
</div>
<p-table [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [metaKeySelection]="metaKeySelection" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="caption"> Multiple Selection with MetaKey </ng-template>
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
<tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
<td>{{ product.code }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.quantity }}</td>
</tr>
</ng-template>
</p-table>
Checkbox Selection #
Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as multiple.
| Code | Name | Category | Quantity | |
|---|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 | |
| nvklal433 | Black Watch | Accessories | 61 | |
| zz21cz3c1 | Blue Band | Fitness | 2 | |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 | |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th style="width: 4rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
<p-tableCheckbox [value]="product"></p-tableCheckbox>
</td>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Radio Button Selection #
Single selection can also be handled using radio buttons.
| Code | Name | Category | Quantity | |
|---|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 | |
| nvklal433 | Black Watch | Accessories | 61 | |
| zz21cz3c1 | Blue Band | Fitness | 2 | |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 | |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th style="width: 4rem"></th>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
<p-tableRadioButton [value]="product"></p-tableRadioButton>
</td>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Controlled Selection #
Row selection can be controlled by utilizing rowSelectable and disabled properties.
| Code | Name | Category | Quantity | |
|---|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 | |
| nvklal433 | Black Watch | Accessories | 61 | |
| zz21cz3c1 | Blue Band | Fitness | 2 | |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 | |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [rowSelectable]="isRowSelectable" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th style="width: 4rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th style="min-width:200px">Code</th>
<th style="min-width:200px">Name</th>
<th style="min-width:200px">Category</th>
<th style="min-width:200px">Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
<p-tableCheckbox [value]="product" [disabled]="isOutOfStock(product)"></p-tableCheckbox>
</td>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Page Only Selection #
| Code | Name | Category | Quantity | |
|---|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 | |
| nvklal433 | Black Watch | Accessories | 61 | |
| zz21cz3c1 | Blue Band | Fitness | 2 | |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 | |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [paginator]="true" [rows]="5" [selectionPageOnly]="true" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th style="width: 4rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th style="min-width:200px">Code</th>
<th style="min-width:200px">Name</th>
<th style="min-width:200px">Category</th>
<th style="min-width:200px">Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
<p-tableCheckbox [value]="product"></p-tableCheckbox>
</td>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Events #
Table provides onRowSelect and onRowUnselect events to listen selection events.
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-toast></p-toast>
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="code"
(onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr [pSelectableRow]="product">
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Column Selection #
Selection using custom elements.
| Code | Name | Category | Quantity | |
|---|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 | |
| nvklal433 | Black Watch | Accessories | 61 | |
| zz21cz3c1 | Blue Band | Fitness | 2 | |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 | |
| h456wer53 | Bracelet | Accessories | 73 |
<p-toast></p-toast>
<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
<th style="width: 5rem"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{ product.code }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.quantity }}</td>
<td>
<button type="button" pButton pRipple icon="pi pi-plus" (click)="selectProduct(product)"></button>
</td>
</tr>
</ng-template>
</p-table>
Row Expand #
Row expansion allows displaying detailed content for a particular row. To use this feature, add a template named rowexpansion and use the pRowToggler directive whose value is the row data instance on an element of your choice whose click event toggles the expansion. This enables providing your custom UI such as buttons, links and so on. Example below uses an anchor with an icon as a toggler. Setting pRowTogglerDisabled as true disables the toggle event for the element.
| Name | Image | Price | Category | Reviews | Status | |
|---|---|---|---|---|---|---|
| Bamboo Watch | | $65.00 | Accessories | |||
| Black Watch | | $72.00 | Accessories | |||
| Blue Band | | $79.00 | Fitness | |||
| Blue T-Shirt | | $29.00 | Clothing | |||
| Bracelet | | $15.00 | Accessories | |||
| Brown Purse |  | $120.00 | Accessories | |||
| Chakra Bracelet |  | $32.00 | Accessories | |||
| Galaxy Earrings |  | $34.00 | Accessories | |||
| Game Controller |  | $99.00 | Electronics | |||
| Gaming Set |  | $299.00 | Electronics |
<p-table [value]="products" dataKey="name" [tableStyle]="{ 'min-width': '60rem' }">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem"></th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th>Image</th>
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product let-expanded="expanded">
<tr>
<td>
<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td>{{ product.name }}</td>
<td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="50" class="shadow-4" /></td>
<td>{{ product.price | currency: 'USD' }}</td>
<td>{{ product.category }}</td>
<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
<td>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-product>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="product.orders" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
<th pSortableColumn="customer">Customer <p-sortIcon field="customer"></p-sortIcon></th>
<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th>
<th pSortableColumn="amount">Amount <p-sortIcon field="amount"></p-sortIcon></th>
<th pSortableColumn="status">Status <p-sortIcon field="status"></p-sortIcon></th>
<th style="width: 4rem"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-order>
<tr>
<td>{{ order.id }}</td>
<td>{{ order.customer }}</td>
<td>{{ order.date }}</td>
<td>{{ order.amount | currency: 'USD' }}</td>
<td>
<p-tag [value]="order.status" [severity]="getStatusSeverity(order.status)"></p-tag>
</td>
<td><p-button type="button" icon="pi pi-plus"></p-button></td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="6">There are no order for this product yet.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
Edit #
| Code | Name | Inventory Status | Price | |
|---|---|---|---|---|
<p-toast></p-toast>
<p-table [value]="products" dataKey="id" editMode="row" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th style="width:20%">Code</th>
<th style="width:20%">Name</th>
<th style="width:20%">Inventory Status</th>
<th style="width:20%">Price</th>
<th style="width:20%"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="product">
<td>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="product.code">
</ng-template>
<ng-template pTemplate="output">
{{product.code}}
</ng-template>
</p-cellEditor>
</td>
<td>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="product.name" required>
</ng-template>
<ng-template pTemplate="output">
{{product.name}}
</ng-template>
</p-cellEditor>
</td>
<td>
<p-cellEditor>
<ng-template pTemplate="input">
<p-dropdown [options]="statuses" appendTo="body" [(ngModel)]="product.inventoryStatus" [style]="{'width':'100%'}"></p-dropdown>
</ng-template>
<ng-template pTemplate="output">
{{product.inventoryStatus}}
</ng-template>
</p-cellEditor>
</td>
<td>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="product.price">
</ng-template>
<ng-template pTemplate="output">
{{product.price | currency: 'USD'}}
</ng-template>
</p-cellEditor>
</td>
<td>
<div class="flex align-items-center justify-content-center gap-2">
<button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button>
<button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
<button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
</div>
</td>
</tr>
</ng-template>
</p-table>
Cell Edit #
In-cell editing is enabled by adding pEditableColumn directive to an editable cell that has a p-cellEditor helper component to define the input-output templates for the edit and view modes respectively.
| Code | Name | Inventory Status | Price |
|---|---|---|---|
<p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="header">
<tr>
<th style="width:25%">Code</th>
<th style="width:25%">Name</th>
<th style="width:25%">Inventory Status</th>
<th style="width:25%">Price</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product let-editing="editing">
<tr>
<td [pEditableColumn]="product.code" pEditableColumnField="code">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="product.code" />
</ng-template>
<ng-template pTemplate="output">
{{ product.code }}
</ng-template>
</p-cellEditor>
</td>
<td [pEditableColumn]="product.name" pEditableColumnField="name">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="product.name" required />
</ng-template>
<ng-template pTemplate="output">
{{ product.name }}
</ng-template>
</p-cellEditor>
</td>
<td [pEditableColumn]="product.inventoryStatus" pEditableColumnField="inventoryStatus">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText [(ngModel)]="product.inventoryStatus" />
</ng-template>
<ng-template pTemplate="output">
{{ product.inventoryStatus }}
</ng-template>
</p-cellEditor>
</td>
<td [pEditableColumn]="product.price" pEditableColumnField="price">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="product.price" />
</ng-template>
<ng-template pTemplate="output">
{{ product.price | currency: 'USD' }}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
Lazy Load #
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging, sorting and filtering happens. Sample here loads the data from remote datasource efficiently using lazy loading. Also, the implementation of checkbox selection in lazy tables is left entirely to the user. Since the table component does not know what will happen to the data on the next page or whether there are instant data changes, the selection array can be implemented in several ways. One of them is as in the example below.
| Name | Country | Company | Representative | |
|---|---|---|---|---|
Any |
<p-table
[value]="customers"
[lazy]="true"
(onLazyLoad)="loadCustomers($event)"
dataKey="id"
[tableStyle]="{ 'min-width': '75rem' }"
[selection]="selectedCustomers"
(selectionChange)="onSelectionChange($event)"
[selectAll]="selectAll"
(selectAllChange)="onSelectAllChange($event)"
[paginator]="true"
[rows]="10"
[totalRecords]="totalRecords"
[loading]="loading"
[globalFilterFields]="['name', 'country.name', 'company', 'representative.name']"
>
<ng-template pTemplate="header">
<tr>
<th style="width: 4rem"></th>
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="country.name">Country <p-sortIcon field="country.name"></p-sortIcon></th>
<th pSortableColumn="company">Company <p-sortIcon field="company"></p-sortIcon></th>
<th pSortableColumn="representative.name">Representative <p-sortIcon field="representative.name"></p-sortIcon></th>
</tr>
<tr>
<th style="width: 4rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th>
<p-columnFilter type="text" field="name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="country.name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="company"></p-columnFilter>
</th>
<th>
<p-columnFilter field="representative" matchMode="in" [showMenu]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" appendTo="body" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name" [maxSelectedLabels]="1" [selectedItemsLabel]="'{0} items'">
<ng-template let-option pTemplate="item">
<div class="inline-block vertical-align-middle">
<img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
<span class="ml-1 mt-1">{{ option.name }}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>
<p-tableCheckbox [value]="customer"></p-tableCheckbox>
</td>
<td>{{ customer.name }}</td>
<td>{{ customer.country.name }}</td>
<td>{{ customer.company }}</td>
<td>{{ customer.representative.name }}</td>
</tr>
</ng-template>
</p-table>
Scroll #
| Name | Country | Company | Representative |
|---|---|---|---|
| James Butt | Algeria | Benton, John B Jr | Ioni Bowcher |
| Josephine Darakjy | Egypt | Chanay, Jeffrey A Esq | Amy Elsner |
| Art Venere | Panama | Chemel, James L Cpa | Asiya Javayant |
| Lenna Paprocki | Slovenia | Feltz Printing Service | Xuxue Feng |
| Donette Foller | South Africa | Printing Dimensions | Asiya Javayant |
| Simona Morasca | Egypt | Chapman, Ross E Esq | Ivan Magalhaes |
| Mitsue Tollner | Paraguay | Morlong Associates | Ivan Magalhaes |
| Leota Dilliard | Serbia | Commercial Press | Onyama Limba |
| Sage Wieser | Egypt | Truhlar And Truhlar Attys | Ivan Magalhaes |
| Kris Marrier | Mexico | King, Christopher A Esq | Onyama Limba |
| Minna Amigon | Romania | Dorl, James J Esq | Anna Fali |
| Abel Maclead | Singapore | Rangoni Of Florence | Bernardo Dominic |
| Kiley Caldarera | Serbia | Feiner Bros | Onyama Limba |
| Graciela Ruta | Chile | Buckley Miller & Wright | Amy Elsner |
| Cammy Albares | Philippines | Rousseaux, Michael Esq | Asiya Javayant |
| Mattie Poquette | Venezuela | Century Communications | Anna Fali |
| Meaghan Garufi | Malaysia | Bolton, Wilbur Esq | Ivan Magalhaes |
| Gladys Rim | Netherlands | T M Byxbee Company Pc | Stephen Shaw |
| Yuki Whobrey | Israel | Farmers Insurance Group | Bernardo Dominic |
| Fletcher Flosi | Argentina | Post Box Services Plus | Xuxue Feng |
| Bette Nicka | Paraguay | Sport En Art | Onyama Limba |
| Veronika Inouye | Ecuador | C 4 Network Inc | Ioni Bowcher |
| Willard Kolmetz | Tunisia | Ingalls, Donald R Esq | Asiya Javayant |
| Maryann Royster | Belarus | Franklin, Peter L Esq | Elwin Sharvill |
| Alisha Slusarski | Iceland | Wtlz Power 107 Fm | Stephen Shaw |
| Allene Iturbide | Italy | Ledecky, David Esq | Ivan Magalhaes |
| Chanel Caudy | Argentina | Professional Image Inc | Ioni Bowcher |
| Ezekiel Chui | Ireland | Sider, Donald C Esq | Amy Elsner |
| Willow Kusko | Romania | U Pull It | Onyama Limba |
| Bernardo Figeroa | Israel | Clark, Richard Cpa | Ioni Bowcher |
| Ammie Corrio | Hungary | Moskowitz, Barry S | Asiya Javayant |
| Francine Vocelka | Honduras | Cascade Realty Advisors Inc | Ioni Bowcher |
| Ernie Stenseth | Australia | Knwz Newsradio | Xuxue Feng |
| Albina Glick | Ukraine | Giampetro, Anthony D | Bernardo Dominic |
| Alishia Sergi | Qatar | Milford Enterprises Inc | Ivan Magalhaes |
| Solange Shinko | Cameroon | Mosocco, Ronald A | Onyama Limba |
| Jose Stockham | Italy | Tri State Refueler Co | Amy Elsner |
| Rozella Ostrosky | Venezuela | Parkway Company | Amy Elsner |
| Valentine Gillian | Paraguay | Fbs Business Finance | Bernardo Dominic |
| Kati Rulapaugh | Puerto Rico | Eder Assocs Consltng Engrs Pc | Ioni Bowcher |
| Youlanda Schemmer | Bolivia | Tri M Tool Inc | Xuxue Feng |
| Dyan Oldroyd | Argentina | International Eyelets Inc | Amy Elsner |
| Roxane Campain | France | Rapid Trading Intl | Anna Fali |
| Lavera Perin | Vietnam | Abc Enterprises Inc | Stephen Shaw |
| Erick Ferencz | Belgium | Cindy Turner Associates | Amy Elsner |
| Fatima Saylors | Canada | Stanton, James D Esq | Onyama Limba |
| Jina Briddick | Mexico | Grace Pastries Inc | Xuxue Feng |
| Kanisha Waycott | Ecuador | Schroer, Gene E Esq | Xuxue Feng |
| Emerson Bowley | Finland | Knights Inn | Stephen Shaw |
| Blair Malet | Finland | Bollinger Mach Shp & Shipyard | Asiya Javayant |
<p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{{customer.name}}</td>
<td>{{customer.country.name}}</td>
<td>{{customer.company}}</td>
<td>{{customer.representative.name}}</td>
</tr>
</ng-template>
</p-table>
Horizontal and Vertical Scroll #
Horizontal and vertical scroll can be used together to enable double axis scrolling.
| Id | Name | Country | Date | Balance | Company | Status | Activity | Representative |
|---|---|---|---|---|---|---|---|---|
| 1000 | James Butt | Algeria | 2015-09-13 | $70,663.00 | Benton, John B Jr | unqualified | 17 | Ioni Bowcher |
| 1001 | Josephine Darakjy | Egypt | 2019-02-09 | $82,429.00 | Chanay, Jeffrey A Esq | proposal | 0 | Amy Elsner |
| 1002 | Art Venere | Panama | 2017-05-13 | $28,334.00 | Chemel, James L Cpa | qualified | 63 | Asiya Javayant |
| 1003 | Lenna Paprocki | Slovenia | 2020-09-15 | $88,521.00 | Feltz Printing Service | new | 37 | Xuxue Feng |
| 1004 | Donette Foller | South Africa | 2016-05-20 | $93,905.00 | Printing Dimensions | proposal | 33 | Asiya Javayant |
| 1005 | Simona Morasca | Egypt | 2018-02-16 | $50,041.00 | Chapman, Ross E Esq | qualified | 68 | Ivan Magalhaes |
| 1006 | Mitsue Tollner | Paraguay | 2018-02-19 | $58,706.00 | Morlong Associates | renewal | 54 | Ivan Magalhaes |
| 1007 | Leota Dilliard | Serbia | 2019-08-13 | $26,640.00 | Commercial Press | renewal | 69 | Onyama Limba |
| 1008 | Sage Wieser | Egypt | 2018-11-21 | $65,369.00 | Truhlar And Truhlar Attys | unqualified | 76 | Ivan Magalhaes |
| 1009 | Kris Marrier | Mexico | 2015-07-07 | $63,451.00 | King, Christopher A Esq | proposal | 3 | Onyama Limba |
| 1010 | Minna Amigon | Romania | 2018-11-07 | $71,169.00 | Dorl, James J Esq | qualified | 38 | Anna Fali |
| 1011 | Abel Maclead | Singapore | 2017-03-11 | $96,842.00 | Rangoni Of Florence | qualified | 87 | Bernardo Dominic |
| 1012 | Kiley Caldarera | Serbia | 2015-10-20 | $92,734.00 | Feiner Bros | unqualified | 80 | Onyama Limba |
| 1013 | Graciela Ruta | Chile | 2016-07-25 | $45,250.00 | Buckley Miller & Wright | negotiation | 59 | Amy Elsner |
| 1014 | Cammy Albares | Philippines | 2019-06-25 | $30,236.00 | Rousseaux, Michael Esq | new | 90 | Asiya Javayant |
| 1015 | Mattie Poquette | Venezuela | 2017-12-12 | $64,533.00 | Century Communications | negotiation | 52 | Anna Fali |
| 1016 | Meaghan Garufi | Malaysia | 2018-07-04 | $37,279.00 | Bolton, Wilbur Esq | unqualified | 31 | Ivan Magalhaes |
| 1017 | Gladys Rim | Netherlands | 2020-02-27 | $27,381.00 | T M Byxbee Company Pc | renewal | 48 | Stephen Shaw |
| 1018 | Yuki Whobrey | Israel | 2017-12-21 | $9,257.00 | Farmers Insurance Group | negotiation | 16 | Bernardo Dominic |
| 1019 | Fletcher Flosi | Argentina | 2016-01-04 | $67,783.00 | Post Box Services Plus | renewal | 19 | Xuxue Feng |
| 1020 | Bette Nicka | Paraguay | 2016-10-21 | $4,609.00 | Sport En Art | renewal | 100 | Onyama Limba |
| 1021 | Veronika Inouye | Ecuador | 2017-03-24 | $26,565.00 | C 4 Network Inc | renewal | 72 | Ioni Bowcher |
| 1022 | Willard Kolmetz | Tunisia | 2017-04-15 | $75,876.00 | Ingalls, Donald R Esq | renewal | 94 | Asiya Javayant |
| 1023 | Maryann Royster | Belarus | 2017-03-11 | $41,121.00 | Franklin, Peter L Esq | qualified | 56 | Elwin Sharvill |
| 1024 | Alisha Slusarski | Iceland | 2018-03-27 | $91,691.00 | Wtlz Power 107 Fm | qualified | 7 | Stephen Shaw |
| 1025 | Allene Iturbide | Italy | 2016-02-20 | $40,137.00 | Ledecky, David Esq | qualified | 1 | Ivan Magalhaes |
| 1026 | Chanel Caudy | Argentina | 2018-06-24 | $21,304.00 | Professional Image Inc | new | 26 | Ioni Bowcher |
| 1027 | Ezekiel Chui | Ireland | 2016-09-24 | $60,454.00 | Sider, Donald C Esq | new | 76 | Amy Elsner |
| 1028 | Willow Kusko | Romania | 2020-04-11 | $17,565.00 | U Pull It | qualified | 7 | Onyama Limba |
| 1029 | Bernardo Figeroa | Israel | 2018-04-11 | $17,774.00 | Clark, Richard Cpa | renewal | 81 | Ioni Bowcher |
| 1030 | Ammie Corrio | Hungary | 2016-06-11 | $49,201.00 | Moskowitz, Barry S | negotiation | 56 | Asiya Javayant |
| 1031 | Francine Vocelka | Honduras | 2017-08-02 | $67,126.00 | Cascade Realty Advisors Inc | qualified | 94 | Ioni Bowcher |
| 1032 | Ernie Stenseth | Australia | 2018-06-06 | $76,017.00 | Knwz Newsradio | renewal | 68 | Xuxue Feng |
| 1033 | Albina Glick | Ukraine | 2019-08-08 | $91,201.00 | Giampetro, Anthony D | proposal | 85 | Bernardo Dominic |
| 1034 | Alishia Sergi | Qatar | 2018-05-19 | $12,237.00 | Milford Enterprises Inc | negotiation | 46 | Ivan Magalhaes |
| 1035 | Solange Shinko | Cameroon | 2015-02-12 | $34,072.00 | Mosocco, Ronald A | qualified | 32 | Onyama Limba |
| 1036 | Jose Stockham | Italy | 2018-04-25 | $94,909.00 | Tri State Refueler Co | qualified | 77 | Amy Elsner |
| 1037 | Rozella Ostrosky | Venezuela | 2016-02-27 | $57,245.00 | Parkway Company | unqualified | 66 | Amy Elsner |
| 1038 | Valentine Gillian | Paraguay | 2019-09-17 | $75,502.00 | Fbs Business Finance | qualified | 25 | Bernardo Dominic |
| 1039 | Kati Rulapaugh | Puerto Rico | 2016-12-03 | $82,075.00 | Eder Assocs Consltng Engrs Pc | renewal | 51 | Ioni Bowcher |
| 1040 | Youlanda Schemmer | Bolivia | 2017-12-15 | $19,208.00 | Tri M Tool Inc | negotiation | 49 | Xuxue Feng |
| 1041 | Dyan Oldroyd | Argentina | 2017-02-02 | $50,194.00 | International Eyelets Inc | qualified | 5 | Amy Elsner |
| 1042 | Roxane Campain | France | 2018-12-25 | $77,714.00 | Rapid Trading Intl | unqualified | 100 | Anna Fali |
| 1043 | Lavera Perin | Vietnam | 2018-04-10 | $35,740.00 | Abc Enterprises Inc | qualified | 71 | Stephen Shaw |
| 1044 | Erick Ferencz | Belgium | 2018-05-06 | $30,790.00 | Cindy Turner Associates | unqualified | 54 | Amy Elsner |
| 1045 | Fatima Saylors | Canada | 2019-07-10 | $52,343.00 | Stanton, James D Esq | renewal | 93 | Onyama Limba |
| 1046 | Jina Briddick | Mexico | 2018-02-19 | $53,966.00 | Grace Pastries Inc | unqualified | 97 | Xuxue Feng |
| 1047 | Kanisha Waycott | Ecuador | 2019-11-27 | $9,920.00 | Schroer, Gene E Esq | new | 80 | Xuxue Feng |
| 1048 | Emerson Bowley | Finland | 2018-11-24 | $78,069.00 | Knights Inn | new | 63 | Stephen Shaw |
| 1049 | Blair Malet | Finland | 2018-04-19 | $65,005.00 | Bollinger Mach Shp & Shipyard | new | 92 | Asiya Javayant |
| Id | Name | Country | Date | Balance | Company | Status | Activity | Representative |
<p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
<ng-template pTemplate="header">
<tr>
<th style="min-width:100px">Id</th>
<th style="min-width:200px">Name</th>
<th style="min-width:200px">Country</th>
<th style="min-width:200px">Date</th>
<th style="min-width:200px">Balance</th>
<th style="min-width:200px">Company</th>
<th style="min-width:200px">Status</th>
<th style="min-width:200px">Activity</th>
<th style="min-width:200px">Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{{customer.id}}</td>
<td>{{customer.name}}</td>
<td>{{customer.country.name}}</td>
<td>{{customer.date}}</td>
<td>{{formatCurrency(customer.balance)}}</td>
<td>{{customer.company}}</td>
<td>{{customer.status}}</td>
<td>{{customer.activity}}</td>
<td>{{customer.representative.name}}</td>
</tr>
</ng-template>
<ng-template pTemplate="footer">
<tr>
<td>Id</td>
<td>Name</td>
<td>Country</td>
<td>Date</td>
<td>Balance</td>
<td>Company</td>
<td>Status</td>
<td>Activity</td>
<td>Representative</td>
</tr>
</ng-template>
</p-table>
Flex Scroll #
Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.
<div class="flex justify-content-center">
<button type="button" (click)="showDialog()" pButton icon="pi pi-external-link" label="View"></button>
</div>
<p-dialog header="Header" [resizable]="false" [modal]="true" [maximizable]="true" appendTo="body" [(visible)]="dialogVisible" [style]="{width: '75vw'}" [contentStyle]="{height: '300px'}">
<p-table [value]="customers" [scrollable]="true" scrollHeight="flex" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{{customer.name}}</td>
<td>{{customer.country.name}}</td>
<td>{{customer.company}}</td>
<td>{{customer.representative.name}}</td>
</tr>
</ng-template>
</p-table>
<ng-template pTemplate="footer">
<button type="button" pButton pRipple icon="pi pi-times" (click)="dialogVisible=false" label="Dismiss" class="p-button-text"></button>
</ng-template>
</p-dialog>
Frozen Rows #
Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property.
| Name | Country | Company | Representative | |
|---|---|---|---|---|
| Geraldine Bisset | France | Bisset Group | Amy Elsner | |
| James Butt | Algeria | Benton, John B Jr | Ioni Bowcher | |
| Josephine Darakjy | Egypt | Chanay, Jeffrey A Esq | Amy Elsner | |
| Art Venere | Panama | Chemel, James L Cpa | Asiya Javayant | |
| Lenna Paprocki | Slovenia | Feltz Printing Service | Xuxue Feng | |
| Donette Foller | South Africa | Printing Dimensions | Asiya Javayant | |
| Simona Morasca | Egypt | Chapman, Ross E Esq | Ivan Magalhaes | |
| Mitsue Tollner | Paraguay | Morlong Associates | Ivan Magalhaes | |
| Leota Dilliard | Serbia | Commercial Press | Onyama Limba | |
| Sage Wieser | Egypt | Truhlar And Truhlar Attys | Ivan Magalhaes | |
| Kris Marrier | Mexico | King, Christopher A Esq | Onyama Limba | |
| Minna Amigon | Romania | Dorl, James J Esq | Anna Fali | |
| Abel Maclead | Singapore | Rangoni Of Florence | Bernardo Dominic | |
| Kiley Caldarera | Serbia | Feiner Bros | Onyama Limba | |
| Graciela Ruta | Chile | Buckley Miller & Wright | Amy Elsner | |
| Cammy Albares | Philippines | Rousseaux, Michael Esq | Asiya Javayant | |
| Mattie Poquette | Venezuela | Century Communications | Anna Fali | |
| Meaghan Garufi | Malaysia | Bolton, Wilbur Esq | Ivan Magalhaes | |
| Gladys Rim | Netherlands | T M Byxbee Company Pc | Stephen Shaw | |
| Yuki Whobrey | Israel | Farmers Insurance Group | Bernardo Dominic | |
| Fletcher Flosi | Argentina | Post Box Services Plus | Xuxue Feng | |
| Bette Nicka | Paraguay | Sport En Art | Onyama Limba | |
| Veronika Inouye | Ecuador | C 4 Network Inc | Ioni Bowcher | |
| Willard Kolmetz | Tunisia | Ingalls, Donald R Esq | Asiya Javayant | |
| Maryann Royster | Belarus | Franklin, Peter L Esq | Elwin Sharvill | |
| Alisha Slusarski | Iceland | Wtlz Power 107 Fm | Stephen Shaw | |
| Allene Iturbide | Italy | Ledecky, David Esq | Ivan Magalhaes | |
| Chanel Caudy | Argentina | Professional Image Inc | Ioni Bowcher | |
| Ezekiel Chui | Ireland | Sider, Donald C Esq | Amy Elsner | |
| Willow Kusko | Romania | U Pull It | Onyama Limba | |
| Bernardo Figeroa | Israel | Clark, Richard Cpa | Ioni Bowcher | |
| Ammie Corrio | Hungary | Moskowitz, Barry S | Asiya Javayant | |
| Francine Vocelka | Honduras | Cascade Realty Advisors Inc | Ioni Bowcher | |
| Ernie Stenseth | Australia | Knwz Newsradio | Xuxue Feng | |
| Albina Glick | Ukraine | Giampetro, Anthony D | Bernardo Dominic | |
| Alishia Sergi | Qatar | Milford Enterprises Inc | Ivan Magalhaes | |
| Solange Shinko | Cameroon | Mosocco, Ronald A | Onyama Limba | |
| Jose Stockham | Italy | Tri State Refueler Co | Amy Elsner | |
| Rozella Ostrosky | Venezuela | Parkway Company | Amy Elsner | |
| Valentine Gillian | Paraguay | Fbs Business Finance | Bernardo Dominic | |
| Kati Rulapaugh | Puerto Rico | Eder Assocs Consltng Engrs Pc | Ioni Bowcher | |
| Youlanda Schemmer | Bolivia | Tri M Tool Inc | Xuxue Feng | |
| Dyan Oldroyd | Argentina | International Eyelets Inc | Amy Elsner | |
| Roxane Campain | France | Rapid Trading Intl | Anna Fali | |
| Lavera Perin | Vietnam | Abc Enterprises Inc | Stephen Shaw | |
| Erick Ferencz | Belgium | Cindy Turner Associates | Amy Elsner | |
| Fatima Saylors | Canada | Stanton, James D Esq | Onyama Limba | |
| Jina Briddick | Mexico | Grace Pastries Inc | Xuxue Feng | |
| Kanisha Waycott | Ecuador | Schroer, Gene E Esq | Xuxue Feng | |
| Emerson Bowley | Finland | Knights Inn | Stephen Shaw | |
| Blair Malet | Finland | Bollinger Mach Shp & Shipyard | Asiya Javayant |
<p-table [value]="unlockedCustomers" [frozenValue]="lockedCustomers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{'min-width': '60rem'}">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Representative</th>
<th style="width:5rem"></th>
</tr>
</ng-template>
<ng-template pTemplate="frozenbody" let-customer let-index="rowIndex">
<tr>
<td>{{customer.name}}</td>
<td>{{customer.country.name}}</td>
<td>{{customer.company}}</td>
<td>{{customer.representative.name}}</td>
<td>
<button pButton pRipple type="button" [icon]="'pi pi-lock-open'" (click)="toggleLock(customer,true,index)" class="p-button-sm p-button-text"></button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer let-index="rowIndex">
<tr>
<td>{{customer.name}}</td>
<td>{{customer.country.name}}</td>
<td>{{customer.company}}</td>
<td>{{customer.representative.name}}</td>
<td>
<button pButton pRipple type="button" [icon]="'pi pi-lock'" [disabled]="lockedCustomers.length >= 2" (click)="toggleLock(customer,false,index)" class="p-button-sm p-button-text"></button>
</td>
</tr>
</ng-template>
</p-table>
Frozen Columns #
Certain columns can be frozen by using the pFrozenColumn directive of the table component. In addition, alignFrozen is available to define whether the column should be fixed on the left or right.
| Name | Id | Country | Date | Company | Status | Activity | Representative | Balance |
|---|---|---|---|---|---|---|---|---|
| James Butt | 1000 | Algeria | 2015-09-13 | Benton, John B Jr | unqualified | 17 | Ioni Bowcher | $70,663.00 |
| Josephine Darakjy | 1001 | Egypt | 2019-02-09 | Chanay, Jeffrey A Esq | proposal | 0 | Amy Elsner | $82,429.00 |
| Art Venere | 1002 | Panama | 2017-05-13 | Chemel, James L Cpa | qualified | 63 | Asiya Javayant | $28,334.00 |
| Lenna Paprocki | 1003 | Slovenia | 2020-09-15 | Feltz Printing Service | new | 37 | Xuxue Feng | $88,521.00 |
| Donette Foller | 1004 | South Africa | 2016-05-20 | Printing Dimensions | proposal | 33 | Asiya Javayant | $93,905.00 |
| Simona Morasca | 1005 | Egypt | 2018-02-16 | Chapman, Ross E Esq | qualified | 68 | Ivan Magalhaes | $50,041.00 |
| Mitsue Tollner | 1006 | Paraguay | 2018-02-19 | Morlong Associates | renewal | 54 | Ivan Magalhaes | $58,706.00 |
| Leota Dilliard | 1007 | Serbia | 2019-08-13 | Commercial Press | renewal | 69 | Onyama Limba | $26,640.00 |
| Sage Wieser | 1008 | Egypt | 2018-11-21 | Truhlar And Truhlar Attys | unqualified | 76 | Ivan Magalhaes | $65,369.00 |
| Kris Marrier | 1009 | Mexico | 2015-07-07 | King, Christopher A Esq | proposal | 3 | Onyama Limba | $63,451.00 |
| Minna Amigon | 1010 | Romania | 2018-11-07 | Dorl, James J Esq | qualified | 38 | Anna Fali | $71,169.00 |
| Abel Maclead | 1011 | Singapore | 2017-03-11 | Rangoni Of Florence | qualified | 87 | Bernardo Dominic | $96,842.00 |
| Kiley Caldarera | 1012 | Serbia | 2015-10-20 | Feiner Bros | unqualified | 80 | Onyama Limba | $92,734.00 |
| Graciela Ruta | 1013 | Chile | 2016-07-25 | Buckley Miller & Wright | negotiation | 59 | Amy Elsner | $45,250.00 |
| Cammy Albares | 1014 | Philippines | 2019-06-25 | Rousseaux, Michael Esq | new | 90 | Asiya Javayant | $30,236.00 |
| Mattie Poquette | 1015 | Venezuela | 2017-12-12 | Century Communications | negotiation | 52 | Anna Fali | $64,533.00 |
| Meaghan Garufi | 1016 | Malaysia | 2018-07-04 | Bolton, Wilbur Esq | unqualified | 31 | Ivan Magalhaes | $37,279.00 |
| Gladys Rim | 1017 | Netherlands | 2020-02-27 | T M Byxbee Company Pc | renewal | 48 | Stephen Shaw | $27,381.00 |
| Yuki Whobrey | 1018 | Israel | 2017-12-21 | Farmers Insurance Group | negotiation | 16 | Bernardo Dominic | $9,257.00 |
| Fletcher Flosi | 1019 | Argentina | 2016-01-04 | Post Box Services Plus | renewal | 19 | Xuxue Feng | $67,783.00 |
| Bette Nicka | 1020 | Paraguay | 2016-10-21 | Sport En Art | renewal | 100 | Onyama Limba | $4,609.00 |
| Veronika Inouye | 1021 | Ecuador | 2017-03-24 | C 4 Network Inc | renewal | 72 | Ioni Bowcher | $26,565.00 |
| Willard Kolmetz | 1022 | Tunisia | 2017-04-15 | Ingalls, Donald R Esq | renewal | 94 | Asiya Javayant | $75,876.00 |
| Maryann Royster | 1023 | Belarus | 2017-03-11 | Franklin, Peter L Esq | qualified | 56 | Elwin Sharvill | $41,121.00 |
| Alisha Slusarski | 1024 | Iceland | 2018-03-27 | Wtlz Power 107 Fm | qualified | 7 | Stephen Shaw | $91,691.00 |
| Allene Iturbide | 1025 | Italy | 2016-02-20 | Ledecky, David Esq | qualified | 1 | Ivan Magalhaes | $40,137.00 |
| Chanel Caudy | 1026 | Argentina | 2018-06-24 | Professional Image Inc | new | 26 | Ioni Bowcher | $21,304.00 |
| Ezekiel Chui | 1027 | Ireland | 2016-09-24 | Sider, Donald C Esq | new | 76 | Amy Elsner | $60,454.00 |
| Willow Kusko | 1028 | Romania | 2020-04-11 | U Pull It | qualified | 7 | Onyama Limba | $17,565.00 |
| Bernardo Figeroa | 1029 | Israel | 2018-04-11 | Clark, Richard Cpa | renewal | 81 | Ioni Bowcher | $17,774.00 |
| Ammie Corrio | 1030 | Hungary | 2016-06-11 | Moskowitz, Barry S | negotiation | 56 | Asiya Javayant | $49,201.00 |
| Francine Vocelka | 1031 | Honduras | 2017-08-02 | Cascade Realty Advisors Inc | qualified | 94 | Ioni Bowcher | $67,126.00 |
| Ernie Stenseth | 1032 | Australia | 2018-06-06 | Knwz Newsradio | renewal | 68 | Xuxue Feng | $76,017.00 |
| Albina Glick | 1033 | Ukraine | 2019-08-08 | Giampetro, Anthony D | proposal | 85 | Bernardo Dominic | $91,201.00 |
| Alishia Sergi | 1034 | Qatar | 2018-05-19 | Milford Enterprises Inc | negotiation | 46 | Ivan Magalhaes | $12,237.00 |
| Solange Shinko | 1035 | Cameroon | 2015-02-12 | Mosocco, Ronald A | qualified | 32 | Onyama Limba | $34,072.00 |
| Jose Stockham | 1036 | Italy | 2018-04-25 | Tri State Refueler Co | qualified | 77 | Amy Elsner | $94,909.00 |
| Rozella Ostrosky | 1037 | Venezuela | 2016-02-27 | Parkway Company | unqualified | 66 | Amy Elsner | $57,245.00 |
| Valentine Gillian | 1038 | Paraguay | 2019-09-17 | Fbs Business Finance | qualified | 25 | Bernardo Dominic | $75,502.00 |
| Kati Rulapaugh | 1039 | Puerto Rico | 2016-12-03 | Eder Assocs Consltng Engrs Pc | renewal | 51 | Ioni Bowcher | $82,075.00 |
| Youlanda Schemmer | 1040 | Bolivia | 2017-12-15 | Tri M Tool Inc | negotiation | 49 | Xuxue Feng | $19,208.00 |
| Dyan Oldroyd | 1041 | Argentina | 2017-02-02 | International Eyelets Inc | qualified | 5 | Amy Elsner | $50,194.00 |
| Roxane Campain | 1042 | France | 2018-12-25 | Rapid Trading Intl | unqualified | 100 | Anna Fali | $77,714.00 |
| Lavera Perin | 1043 | Vietnam | 2018-04-10 | Abc Enterprises Inc | qualified | 71 | Stephen Shaw | $35,740.00 |
| Erick Ferencz | 1044 | Belgium | 2018-05-06 | Cindy Turner Associates | unqualified | 54 | Amy Elsner | $30,790.00 |
| Fatima Saylors | 1045 | Canada | 2019-07-10 | Stanton, James D Esq | renewal | 93 | Onyama Limba | $52,343.00 |
| Jina Briddick | 1046 | Mexico | 2018-02-19 | Grace Pastries Inc | unqualified | 97 | Xuxue Feng | $53,966.00 |
| Kanisha Waycott | 1047 | Ecuador | 2019-11-27 | Schroer, Gene E Esq | new | 80 | Xuxue Feng | $9,920.00 |
| Emerson Bowley | 1048 | Finland | 2018-11-24 | Knights Inn | new | 63 | Stephen Shaw | $78,069.00 |
| Blair Malet | 1049 | Finland | 2018-04-19 | Bollinger Mach Shp & Shipyard | new | 92 | Asiya Javayant | $65,005.00 |
<p-toggleButton [(ngModel)]="balanceFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Balance'" offLabel="Balance"></p-toggleButton>
<p-table [value]="customers" [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
<ng-template pTemplate="header">
<tr>
<th style="min-width:200px" pFrozenColumn>Name</th>
<th style="min-width:100px">Id</th>
<th style="min-width:200px">Country</th>
<th style="min-width:200px">Date</th>
<th style="min-width:200px">Company</th>
<th style="min-width:200px">Status</th>
<th style="min-width:200px">Activity</th>
<th style="min-width:200px">Representative</th>
<th style="min-width:200px" alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">Balance</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td pFrozenColumn>{{customer.name}}</td>
<td style="min-width:100px">{{customer.id}}</td>
<td>{{customer.country.name}}</td>
<td>{{customer.date}}</td>
<td>{{customer.company}}</td>
<td>{{customer.status}}</td>
<td>{{customer.activity}}</td>
<td >{{customer.representative.name}}</td>
<td alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">{{formatCurrency(customer.balance)}}</td>
</tr>
</ng-template>
</p-table>
Virtual Scroll #
| Id | Vin | Year | Brand | Color |
|---|
<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" style="width: 20%;">
{{ col.header }}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-columns="columns">
<tr style="height:46px">
<td *ngFor="let col of columns">
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-table>
Lazy #
VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also suggested to use the same virtualScrollItemSize value on the tr element inside the body template.
| Id | Vin | Year | Brand | Color |
|---|
<p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" scrollHeight="250px" [rows]="100"
[virtualScroll]="true" [virtualScrollItemSize]="46" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" style="width: 20%;">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr style="height:46px">
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="loadingbody" let-columns="columns">
<tr style="height:46px">
<td *ngFor="let col of columns; let even = even">
<p-skeleton [ngStyle]="{'width': even ? (col.field === 'year' ? '30%' : '40%') : '60%'}"></p-skeleton>
</td>
</tr>
</ng-template>
</p-table>
Column Group #
Columns can be grouped using rowspan and colspan properties.
| Product | Sale Rate | |||
|---|---|---|---|---|
| Sales | Profits | |||
| Last Year | This Year | Last Year | This Year | |
| Bamboo Watch | 51% | 40% | $54,406.00 | $43,342.00 |
| Black Watch | 83% | 9% | $423,132.00 | $312,122.00 |
| Blue Band | 38% | 5% | $12,321.00 | $8,500.00 |
| Blue T-Shirt | 49% | 22% | $745,232.00 | $65,323.00 |
| Brown Purse | 17% | 79% | $643,242.00 | $500,332.00 |
| Chakra Bracelet | 52% | 65% | $421,132.00 | $150,005.00 |
| Galaxy Earrings | 82% | 12% | $131,211.00 | $100,214.00 |
| Game Controller | 44% | 45% | $66,442.00 | $53,322.00 |
| Gaming Set | 90% | 56% | $765,442.00 | $296,232.00 |
| Gold Phone Case | 75% | 54% | $21,212.00 | $12,533.00 |
| Totals | $3,283,772.00 | $1,541,925.00 | ||
<p-table [value]="sales" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th rowspan="3">Product</th>
<th colspan="4">Sale Rate</th>
</tr>
<tr>
<th colspan="2">Sales</th>
<th colspan="2">Profits</th>
</tr>
<tr>
<th>Last Year</th>
<th>This Year</th>
<th>Last Year</th>
<th>This Year</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-sale>
<tr>
<td>{{sale.product}}</td>
<td>{{sale.lastYearSale}}%</td>
<td>{{sale.thisYearSale}}%</td>
<td>{{sale.lastYearProfit | currency: 'USD'}}</td>
<td>{{sale.thisYearProfit | currency: 'USD'}}</td>
</tr>
</ng-template>
<ng-template pTemplate="footer">
<tr>
<td colspan="3" class="text-right">Totals</td>
<td>{{lastYearTotal | currency: 'USD'}}</td>
<td>{{thisYearTotal | currency: 'USD'}}</td>
</tr>
</ng-template>
</p-table>
Row Group #
| Name | Country | Company | Status | Date |
|---|---|---|---|---|
| Amy Elsner | ||||
| Josephine Darakjy | Egypt | Chanay, Jeffrey A Esq | 2019-02-09 | |
| Graciela Ruta | Chile | Buckley Miller & Wright | 2016-07-25 | |
| Ezekiel Chui | Ireland | Sider, Donald C Esq | 2016-09-24 | |
| Jose Stockham | Italy | Tri State Refueler Co | 2018-04-25 | |
| Rozella Ostrosky | Venezuela | Parkway Company | 2016-02-27 | |
| Dyan Oldroyd | Argentina | International Eyelets Inc | 2017-02-02 | |
| Erick Ferencz | Belgium | Cindy Turner Associates | 2018-05-06 | |
| Total Customers: 7 | ||||
 Anna Fali | ||||
| Minna Amigon | Romania | Dorl, James J Esq | 2018-11-07 | |
| Mattie Poquette | Venezuela | Century Communications | 2017-12-12 | |
| Roxane Campain | France | Rapid Trading Intl | 2018-12-25 | |
| Total Customers: 3 | ||||
| Asiya Javayant | ||||
| Art Venere | Panama | Chemel, James L Cpa | 2017-05-13 | |
| Donette Foller | South Africa | Printing Dimensions | 2016-05-20 | |
| Cammy Albares | Philippines | Rousseaux, Michael Esq | 2019-06-25 | |
| Willard Kolmetz | Tunisia | Ingalls, Donald R Esq | 2017-04-15 | |
| Ammie Corrio | Hungary | Moskowitz, Barry S | 2016-06-11 | |
| Blair Malet | Finland | Bollinger Mach Shp & Shipyard | 2018-04-19 | |
| Total Customers: 6 | ||||
 Bernardo Dominic | ||||
| Abel Maclead | Singapore | Rangoni Of Florence | 2017-03-11 | |
| Yuki Whobrey | Israel | Farmers Insurance Group | 2017-12-21 | |
| Albina Glick | Ukraine | Giampetro, Anthony D | 2019-08-08 | |
| Valentine Gillian | Paraguay | Fbs Business Finance | 2019-09-17 | |
| Total Customers: 4 | ||||
 Elwin Sharvill | ||||
| Maryann Royster | Belarus | Franklin, Peter L Esq | 2017-03-11 | |
| Total Customers: 1 | ||||
| Ioni Bowcher | ||||
| James Butt | Algeria | Benton, John B Jr | 2015-09-13 | |
| Veronika Inouye | Ecuador | C 4 Network Inc | 2017-03-24 | |
| Chanel Caudy | Argentina | Professional Image Inc | 2018-06-24 | |
| Bernardo Figeroa | Israel | Clark, Richard Cpa | 2018-04-11 | |
| Francine Vocelka | Honduras | Cascade Realty Advisors Inc | 2017-08-02 | |
| Kati Rulapaugh | Puerto Rico | Eder Assocs Consltng Engrs Pc | 2016-12-03 | |
| Total Customers: 6 | ||||
| Ivan Magalhaes | ||||
| Simona Morasca | Egypt | Chapman, Ross E Esq | 2018-02-16 | |
| Mitsue Tollner | Paraguay | Morlong Associates | 2018-02-19 | |
| Sage Wieser | Egypt | Truhlar And Truhlar Attys | 2018-11-21 | |
| Meaghan Garufi | Malaysia | Bolton, Wilbur Esq | 2018-07-04 | |
| Allene Iturbide | Italy | Ledecky, David Esq | 2016-02-20 | |
| Alishia Sergi | Qatar | Milford Enterprises Inc | 2018-05-19 | |
| Total Customers: 6 | ||||
| Onyama Limba | ||||
| Leota Dilliard | Serbia | Commercial Press | 2019-08-13 | |
| Kris Marrier | Mexico | King, Christopher A Esq | 2015-07-07 | |
| Kiley Caldarera | Serbia | Feiner Bros | 2015-10-20 | |
| Bette Nicka | Paraguay | Sport En Art | 2016-10-21 | |
| Willow Kusko | Romania | U Pull It | 2020-04-11 | |
| Solange Shinko | Cameroon | Mosocco, Ronald A | 2015-02-12 | |
| Fatima Saylors | Canada | Stanton, James D Esq | 2019-07-10 | |
| Total Customers: 7 | ||||
 Stephen Shaw | ||||
| Gladys Rim | Netherlands | T M Byxbee Company Pc | 2020-02-27 | |
| Alisha Slusarski | Iceland | Wtlz Power 107 Fm | 2018-03-27 | |
| Lavera Perin | Vietnam | Abc Enterprises Inc | 2018-04-10 | |
| Emerson Bowley | Finland | Knights Inn | 2018-11-24 | |
| Total Customers: 4 | ||||
| Xuxue Feng | ||||
| Lenna Paprocki | Slovenia | Feltz Printing Service | 2020-09-15 | |
| Fletcher Flosi | Argentina | Post Box Services Plus | 2016-01-04 | |
| Ernie Stenseth | Australia | Knwz Newsradio | 2018-06-06 | |
| Youlanda Schemmer | Bolivia | Tri M Tool Inc | 2017-12-15 | |
| Jina Briddick | Mexico | Grace Pastries Inc | 2018-02-19 | |
| Kanisha Waycott | Ecuador | Schroer, Gene E Esq | 2019-11-27 | |
| Total Customers: 6 | ||||
<p-table [value]="customers" sortField="representative.name" sortMode="single" [scrollable]="true" scrollHeight="400px" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{'min-width': '60rem'}">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Status</th>
<th>Date</th>
</tr>
</ng-template>
<ng-template pTemplate="groupheader" let-customer>
<tr pRowGroupHeader>
<td colspan="5">
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="font-bold ml-2">{{customer.representative.name}}</span>
</td>
</tr>
</ng-template>
<ng-template pTemplate="groupfooter" let-customer>
<tr>
<td colspan="5" class="text-right font-bold pr-6">Total Customers: {{calculateCustomerTotal(customer.representative.name)}}</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
<tr>
<td>
{{customer.name}}
</td>
<td>
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px">
<span class="ml-1 vertical-align-middle">{{customer.country.name}}</span>
</td>
<td>
{{customer.company}}
</td>
<td>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
</td>
<td>
{{customer.date}}
</td>
</tr>
</ng-template>
</p-table>
Expandable #
When expandableRowGroups is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the expandedRows and onRowToggle properties.
| Name | Country | Company | Status | Date |
|---|---|---|---|---|
| Amy Elsner | ||||
| Anna Fali | ||||
| Asiya Javayant | ||||
| Bernardo Dominic | ||||
| Elwin Sharvill | ||||
| Ioni Bowcher | ||||
| Ivan Magalhaes | ||||
| Onyama Limba | ||||
| Stephen Shaw | ||||
| Xuxue Feng | ||||
<p-table [value]="customers" sortField="representative.name" sortMode="single" dataKey="representative.name" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{'min-width': '70rem'}">
<ng-template pTemplate="header">
<tr>
<th style="width:20%">Name</th>
<th style="width:20%">Country</th>
<th style="width:20%">Company</th>
<th style="width:20%">Status</th>
<th style="width:20%">Date</th>
</tr>
</ng-template>
<ng-template pTemplate="groupheader" let-customer let-rowIndex="rowIndex" let-expanded="expanded">
<tr>
<td colspan="5">
<button type="button" pButton pRipple [pRowToggler]="customer" class="p-button-text p-button-rounded p-button-plain mr-2" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="font-bold ml-2">{{customer.representative.name}}</span>
</td>
</tr>
</ng-template>
<ng-template pTemplate="groupfooter" let-customer>
<tr class="p-rowgroup-footer">
<td colspan="4" style="text-align: right">Total Customers</td>
<td>{{calculateCustomerTotal(customer.representative.name)}}</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-customer>
<tr>
<td>
{{customer.name}}
</td>
<td>
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px">
<span class="ml-1 vertical-align-middle">{{customer.country.name}}</span>
</td>
<td>
{{customer.company}}
</td>
<td>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
</td>
<td>
{{customer.date}}
</td>
</tr>
</ng-template>
</p-table>
RowSpan #
When rowGroupMode is configured to be rowspan, the grouping column spans multiple rows.
| # | Representative | Name | Country | Company | Status | Date |
|---|---|---|---|---|---|---|
| 0 | Amy Elsner | Josephine Darakjy | Egypt | Chanay, Jeffrey A Esq | 2019-02-09 | |
| 1 | Graciela Ruta | Chile | Buckley Miller & Wright | 2016-07-25 | ||
| 2 | Ezekiel Chui | Ireland | Sider, Donald C Esq | 2016-09-24 | ||
| 3 | Jose Stockham | Italy | Tri State Refueler Co | 2018-04-25 | ||
| 4 | Rozella Ostrosky | Venezuela | Parkway Company | 2016-02-27 | ||
| 5 | Dyan Oldroyd | Argentina | International Eyelets Inc | 2017-02-02 | ||
| 6 | Erick Ferencz | Belgium | Cindy Turner Associates | 2018-05-06 | ||
| 7 | Anna Fali | Minna Amigon | Romania | Dorl, James J Esq | 2018-11-07 | |
| 8 | Mattie Poquette | Venezuela | Century Communications | 2017-12-12 | ||
| 9 | Roxane Campain | France | Rapid Trading Intl | 2018-12-25 | ||
| 10 | Asiya Javayant | Art Venere | Panama | Chemel, James L Cpa | 2017-05-13 | |
| 11 | Donette Foller | South Africa | Printing Dimensions | 2016-05-20 | ||
| 12 | Cammy Albares | Philippines | Rousseaux, Michael Esq | 2019-06-25 | ||
| 13 | Willard Kolmetz | Tunisia | Ingalls, Donald R Esq | 2017-04-15 | ||
| 14 | Ammie Corrio | Hungary | Moskowitz, Barry S | 2016-06-11 | ||
| 15 | Blair Malet | Finland | Bollinger Mach Shp & Shipyard | 2018-04-19 | ||
| 16 | Bernardo Dominic | Abel Maclead | Singapore | Rangoni Of Florence | 2017-03-11 | |
| 17 | Yuki Whobrey | Israel | Farmers Insurance Group | 2017-12-21 | ||
| 18 | Albina Glick | Ukraine | Giampetro, Anthony D | 2019-08-08 | ||
| 19 | Valentine Gillian | Paraguay | Fbs Business Finance | 2019-09-17 | ||
| 20 | Elwin Sharvill | Maryann Royster | Belarus | Franklin, Peter L Esq | 2017-03-11 | |
| 21 | Ioni Bowcher | James Butt | Algeria | Benton, John B Jr | 2015-09-13 | |
| 22 | Veronika Inouye | Ecuador | C 4 Network Inc | 2017-03-24 | ||
| 23 | Chanel Caudy | Argentina | Professional Image Inc | 2018-06-24 | ||
| 24 | Bernardo Figeroa | Israel | Clark, Richard Cpa | 2018-04-11 | ||
| 25 | Francine Vocelka | Honduras | Cascade Realty Advisors Inc | 2017-08-02 | ||
| 26 | Kati Rulapaugh | Puerto Rico | Eder Assocs Consltng Engrs Pc | 2016-12-03 | ||
| 27 | Ivan Magalhaes | Simona Morasca | Egypt | Chapman, Ross E Esq | 2018-02-16 | |
| 28 | Mitsue Tollner | Paraguay | Morlong Associates | 2018-02-19 | ||
| 29 | Sage Wieser | Egypt | Truhlar And Truhlar Attys | 2018-11-21 | ||
| 30 | Meaghan Garufi | Malaysia | Bolton, Wilbur Esq | 2018-07-04 | ||
| 31 | Allene Iturbide | Italy | Ledecky, David Esq | 2016-02-20 | ||
| 32 | Alishia Sergi | Qatar | Milford Enterprises Inc | 2018-05-19 | ||
| 33 | Onyama Limba | Leota Dilliard | Serbia | Commercial Press | 2019-08-13 | |
| 34 | Kris Marrier | Mexico | King, Christopher A Esq | 2015-07-07 | ||
| 35 | Kiley Caldarera | Serbia | Feiner Bros | 2015-10-20 | ||
| 36 | Bette Nicka | Paraguay | Sport En Art | 2016-10-21 | ||
| 37 | Willow Kusko | Romania | U Pull It | 2020-04-11 | ||
| 38 | Solange Shinko | Cameroon | Mosocco, Ronald A | 2015-02-12 | ||
| 39 | Fatima Saylors | Canada | Stanton, James D Esq | 2019-07-10 | ||
| 40 | Stephen Shaw | Gladys Rim | Netherlands | T M Byxbee Company Pc | 2020-02-27 | |
| 41 | Alisha Slusarski | Iceland | Wtlz Power 107 Fm | 2018-03-27 | ||
| 42 | Lavera Perin | Vietnam | Abc Enterprises Inc | 2018-04-10 | ||
| 43 | Emerson Bowley | Finland | Knights Inn | 2018-11-24 | ||
| 44 | Xuxue Feng | Lenna Paprocki | Slovenia | Feltz Printing Service | 2020-09-15 | |
| 45 | Fletcher Flosi | Argentina | Post Box Services Plus | 2016-01-04 | ||
| 46 | Ernie Stenseth | Australia | Knwz Newsradio | 2018-06-06 | ||
| 47 | Youlanda Schemmer | Bolivia | Tri M Tool Inc | 2017-12-15 | ||
| 48 | Jina Briddick | Mexico | Grace Pastries Inc | 2018-02-19 | ||
| 49 | Kanisha Waycott | Ecuador | Schroer, Gene E Esq | 2019-11-27 |
<p-table [value]="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" [tableStyle]="{'min-width': '75rem'}">
<ng-template pTemplate="header">
<tr>
<th style="width:3rem">#</th>
<th>Representative</th>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Status</th>
<th>Date</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex" let-rowgroup="rowgroup" let-rowspan="rowspan">
<tr>
<td>{{rowIndex}}</td>
<td *ngIf="rowgroup" [attr.rowspan]="rowspan">
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="font-bold ml-2">{{customer.representative.name}}</span>
</td>
<td>
{{customer.name}}
</td>
<td>
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px">
<span class="ml-1 vertical-align-middle">{{customer.country.name}}</span>
</td>
<td>
{{customer.company}}
</td>
<td>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
</td>
<td>
{{customer.date}}
</td>
</tr>
</ng-template>
</p-table>
Column Resize #
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th pResizableColumn>Code</th>
<th pResizableColumn>Name</th>
<th pResizableColumn>Category</th>
<th pResizableColumn>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Expand Mode #
Setting columnResizeMode as expand changes the table width as well.
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [value]="products" [resizableColumns]="true" columnResizeMode="expand" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th pResizableColumn>Code</th>
<th pResizableColumn>Name</th>
<th pResizableColumn>Category</th>
<th pResizableColumn>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.quantity}}</td>
</tr>
</ng-template>
</p-table>
Scrollable #
| Name | Country | Company | Representative |
|---|---|---|---|
| James Butt | Algeria | Benton, John B Jr | Ioni Bowcher |
| Josephine Darakjy | Egypt | Chanay, Jeffrey A Esq | Amy Elsner |
| Art Venere | Panama | Chemel, James L Cpa | Asiya Javayant |
| Lenna Paprocki | Slovenia | Feltz Printing Service | Xuxue Feng |
| Donette Foller | South Africa | Printing Dimensions | Asiya Javayant |
| Simona Morasca | Egypt | Chapman, Ross E Esq | Ivan Magalhaes |
| Mitsue Tollner | Paraguay | Morlong Associates | Ivan Magalhaes |
| Leota Dilliard | Serbia | Commercial Press | Onyama Limba |
| Sage Wieser | Egypt | Truhlar And Truhlar Attys | Ivan Magalhaes |
| Kris Marrier | Mexico | King, Christopher A Esq | Onyama Limba |
| Minna Amigon | Romania | Dorl, James J Esq | Anna Fali |
| Abel Maclead | Singapore | Rangoni Of Florence | Bernardo Dominic |
| Kiley Caldarera | Serbia | Feiner Bros | Onyama Limba |
| Graciela Ruta | Chile | Buckley Miller & Wright | Amy Elsner |
| Cammy Albares | Philippines | Rousseaux, Michael Esq | Asiya Javayant |
| Mattie Poquette | Venezuela | Century Communications | Anna Fali |
| Meaghan Garufi | Malaysia | Bolton, Wilbur Esq | Ivan Magalhaes |
| Gladys Rim | Netherlands | T M Byxbee Company Pc | Stephen Shaw |
| Yuki Whobrey | Israel | Farmers Insurance Group | Bernardo Dominic |
| Fletcher Flosi | Argentina | Post Box Services Plus | Xuxue Feng |
| Bette Nicka | Paraguay | Sport En Art | Onyama Limba |
| Veronika Inouye | Ecuador | C 4 Network Inc | Ioni Bowcher |
| Willard Kolmetz | Tunisia | Ingalls, Donald R Esq | Asiya Javayant |
| Maryann Royster | Belarus | Franklin, Peter L Esq | Elwin Sharvill |
| Alisha Slusarski | Iceland | Wtlz Power 107 Fm | Stephen Shaw |
| Allene Iturbide | Italy | Ledecky, David Esq | Ivan Magalhaes |
| Chanel Caudy | Argentina | Professional Image Inc | Ioni Bowcher |
| Ezekiel Chui | Ireland | Sider, Donald C Esq | Amy Elsner |
| Willow Kusko | Romania | U Pull It | Onyama Limba |
| Bernardo Figeroa | Israel | Clark, Richard Cpa | Ioni Bowcher |
| Ammie Corrio | Hungary | Moskowitz, Barry S | Asiya Javayant |
| Francine Vocelka | Honduras | Cascade Realty Advisors Inc | Ioni Bowcher |
| Ernie Stenseth | Australia | Knwz Newsradio | Xuxue Feng |
| Albina Glick | Ukraine | Giampetro, Anthony D | Bernardo Dominic |
| Alishia Sergi | Qatar | Milford Enterprises Inc | Ivan Magalhaes |
| Solange Shinko | Cameroon | Mosocco, Ronald A | Onyama Limba |
| Jose Stockham | Italy | Tri State Refueler Co | Amy Elsner |
| Rozella Ostrosky | Venezuela | Parkway Company | Amy Elsner |
| Valentine Gillian | Paraguay | Fbs Business Finance | Bernardo Dominic |
| Kati Rulapaugh | Puerto Rico | Eder Assocs Consltng Engrs Pc | Ioni Bowcher |
| Youlanda Schemmer | Bolivia | Tri M Tool Inc | Xuxue Feng |
| Dyan Oldroyd | Argentina | International Eyelets Inc | Amy Elsner |
| Roxane Campain | France | Rapid Trading Intl | Anna Fali |
| Lavera Perin | Vietnam | Abc Enterprises Inc | Stephen Shaw |
| Erick Ferencz | Belgium | Cindy Turner Associates | Amy Elsner |
| Fatima Saylors | Canada | Stanton, James D Esq | Onyama Limba |
| Jina Briddick | Mexico | Grace Pastries Inc | Xuxue Feng |
| Kanisha Waycott | Ecuador | Schroer, Gene E Esq | Xuxue Feng |
| Emerson Bowley | Finland | Knights Inn | Stephen Shaw |
| Blair Malet | Finland | Bollinger Mach Shp & Shipyard | Asiya Javayant |
| Brock Bolognia | Bolivia | Orinda News | Onyama Limba |
| Lorrie Nestle | Germany | Ballard Spahr Andrews | Anna Fali |
| Sabra Uyetake | Peru | Lowy Limousine Service | Amy Elsner |
| Marjory Mastella | Netherlands | Vicon Corporation | Anna Fali |
| Karl Klonowski | Saudi Arabia | Rossi, Michael M | Onyama Limba |
| Tonette Wenner | Australia | Northwest Publishing | Elwin Sharvill |
| Amber Monarrez | Sweden | Branford Wire & Mfg Co | Bernardo Dominic |
| Shenika Seewald | Australia | East Coast Marketing | Xuxue Feng |
| Delmy Ahle | Belgium | Wye Technologies Inc | Anna Fali |
| Deeanna Juhas | Sweden | Healy, George W Iv | Asiya Javayant |
| Blondell Pugh | Ireland | Alpenlite Inc | Bernardo Dominic |
| Jamal Vanausdal | Morocco | Hubbard, Bruce Esq | Ioni Bowcher |
| Cecily Hollack | Bolivia | Arthur A Oliver & Son Inc | Amy Elsner |
| Carmelina Lindall | Puerto Rico | George Jessop Carter Jewelers | Asiya Javayant |
| Maurine Yglesias | Taiwan | Schultz, Thomas C Md | Ioni Bowcher |
| Tawna Buvens | Indonesia | H H H Enterprises Inc | Amy Elsner |
| Penney Weight | South Africa | Hawaiian King Hotel | Amy Elsner |
| Elly Morocco | Thailand | Killion Industries | Xuxue Feng |
| Ilene Eroman | Netherlands | Robinson, William J Esq | Anna Fali |
| Vallie Mondella | Latvia | Private Properties | Ivan Magalhaes |
| Kallie Blackwood | Iceland | Rowley Schlimgen Inc | Amy Elsner |
| Johnetta Abdallah | Netherlands | Forging Specialties | Elwin Sharvill |
| Bobbye Rhym | Ukraine | Smits, Patricia Garity | Xuxue Feng |
| Micaela Rhymes | France | H Lee Leonard Attorney At Law | Asiya Javayant |
| Tamar Hoogland | Guatemala | A K Construction Co | Asiya Javayant |
| Moon Parlato | Czech Republic | Ambelang, Jessica M Md | Onyama Limba |
| Laurel Reitler | United Kingdom | Q A Service | Amy Elsner |
| Delisa Crupi | Taiwan | Wood & Whitacre Contractors | Xuxue Feng |
| Viva Toelkes | United States | Mark Iv Press Ltd | Stephen Shaw |
| Elza Lipke | Ireland | Museum Of Science & Industry | Elwin Sharvill |
| Devorah Chickering | Spain | Garrison Ind | Asiya Javayant |
| Timothy Mulqueen | Netherlands | Saronix Nymph Products | Asiya Javayant |
| Arlette Honeywell | Panama | Smc Inc | Amy Elsner |
| Dominque Dickerson | Argentina | E A I Electronic Assocs Inc | Bernardo Dominic |
| Lettie Isenhower | Canada | Conte, Christopher A Esq | Bernardo Dominic |
| Myra Munns | Lithuania | Anker Law Office | Elwin Sharvill |
| Stephaine Barfield | Belgium | Beutelschies & Company | Anna Fali |
| Lai Gato | Nigeria | Fligg, Kenneth I Jr | Onyama Limba |
| Stephen Emigh | Cuba | Sharp, J Daniel Esq | Elwin Sharvill |
| Tyra Shields | Honduras | Assink, Anne H Esq | Anna Fali |
| Tammara Wardrip | Saudi Arabia | Jewel My Shop Inc | Xuxue Feng |
| Cory Gibes | Malaysia | Chinese Translation Resources | Anna Fali |
| Danica Bruschke | Taiwan | Stevens, Charles T | Stephen Shaw |
| Wilda Giguere | Iceland | Mclaughlin, Luther W Cpa | Asiya Javayant |
| Elvera Benimadho | Malaysia | Tree Musketeers | Onyama Limba |
| Carma Vanheusen | Turkey | Springfield Div Oh Edison Co | Stephen Shaw |
| Malinda Hochard | Serbia | Logan Memorial Hospital | Asiya Javayant |
| Natalie Fern | Canada | Kelly, Charles G Esq | Amy Elsner |
| Lisha Centini | Netherlands | Industrial Paper Shredders Inc | Ioni Bowcher |
| Arlene Klusman | Jamaica | Beck Horizon Builders | Elwin Sharvill |
| Alease Buemi | Costa Rica | Porto Cayo At Hawks Cay | Onyama Limba |
| Louisa Cronauer | Costa Rica | Pacific Grove Museum Ntrl Hist | Anna Fali |
| Angella Cetta | Vietnam | Bender & Hatley Pc | Ivan Magalhaes |
| Cyndy Goldammer | Burkina Faso | Di Cristina J & Son | Stephen Shaw |
| Rosio Cork | Singapore | Green Goddess | Asiya Javayant |
| Celeste Korando | Costa Rica | American Arts & Graphics | Amy Elsner |
| Twana Felger | Croatia | Opryland Hotel | Ioni Bowcher |
| Estrella Samu | Vietnam | Marking Devices Pubg Co | Bernardo Dominic |
| Donte Kines | Slovakia | W Tc Industries Inc | Onyama Limba |
| Tiffiny Steffensmeier | Pakistan | Whitehall Robbins Labs Divsn | Ivan Magalhaes |
| Edna Miceli | France | Sampler | Asiya Javayant |
| Sue Kownacki | Jamaica | Juno Chefs Incorporated | Onyama Limba |
| Jesusa Shin | Ukraine | Carroccio, A Thomas Esq | Bernardo Dominic |
| Rolland Francescon | United Kingdom | Stanley, Richard L Esq | Onyama Limba |
| Pamella Schmierer | Belgium | K Cs Cstm Mouldings Windows | Ioni Bowcher |
| Glory Kulzer | Croatia | Comfort Inn | Onyama Limba |
| Shawna Palaspas | Estonia | Windsor, James L Esq | Bernardo Dominic |
| Brandon Callaro | Romania | Jackson Shields Yeiser | Anna Fali |
| Scarlet Cartan | Panama | Box, J Calvin Esq | Xuxue Feng |
| Oretha Menter | Panama | Custom Engineering Inc | Elwin Sharvill |
| Ty Smith | United States | Bresler Eitel Framg Gllry Ltd | Anna Fali |
| Xuan Rochin | Colombia | Carol, Drake Sparks Esq | Amy Elsner |
| Lindsey Dilello | Austria | Biltmore Investors Bank | Amy Elsner |
| Devora Perez | Uruguay | Desco Equipment Corp | Onyama Limba |
| Herman Demesa | Paraguay | Merlin Electric Co | Asiya Javayant |
| Rory Papasergi | Egypt | Bailey Cntl Co Div Babcock | Anna Fali |
| Talia Riopelle | Guatemala | Ford Brothers Wholesale Inc | Elwin Sharvill |
| Van Shire | Netherlands | Cambridge Inn | Ioni Bowcher |
| Lucina Lary | Switzerland | Matricciani, Albert J Jr | Xuxue Feng |
| Bok Isaacs | Chile | Nelson Hawaiian Ltd | Asiya Javayant |
| Rolande Spickerman | Panama | Neland Travel Agency | Bernardo Dominic |
| Howard Paulas | Indonesia | Asendorf, J Alan Esq | Ioni Bowcher |
| Kimbery Madarang | Senegal | Silberman, Arthur L Esq | Onyama Limba |
| Thurman Manno | Colombia | Honey Bee Breeding Genetics & | Ivan Magalhaes |
| Becky Mirafuentes | Serbia | Wells Kravitz Schnitzer | Elwin Sharvill |
| Beatriz Corrington | South Africa | Prohab Rehabilitation Servs | Stephen Shaw |
| Marti Maybury | Thailand | Eldridge, Kristin K Esq | Bernardo Dominic |
| Nieves Gotter | Latvia | Vlahos, John J Esq | Elwin Sharvill |
| Leatha Hagele | Ukraine | Ninas Indian Grs & Videos | Stephen Shaw |
| Valentin Klimek | Ivory Coast | Schmid, Gayanne K Esq | Ivan Magalhaes |
| Melissa Wiklund | Japan | Moapa Valley Federal Credit Un | Onyama Limba |
| Sheridan Zane | Croatia | Kentucky Tennessee Clay Co | Bernardo Dominic |
| Bulah Padilla | Philippines | Admiral Party Rentals & Sales | Ioni Bowcher |
| Audra Kohnert | Netherlands | Nelson, Karolyn King Esq | Bernardo Dominic |
| Daren Weirather | Israel | Panasystems | Onyama Limba |
| Fernanda Jillson | Mexico | Shank, Edward L Esq | Xuxue Feng |
| Gearldine Gellinger | Egypt | Megibow & Edwards | Anna Fali |
| Chau Kitzman | Paraguay | Benoff, Edward Esq | Onyama Limba |
| Theola Frey | Vietnam | Woodbridge Free Public Library | Ioni Bowcher |
| Cheryl Haroldson | France | New York Life John Thune | Elwin Sharvill |
| Laticia Merced | Burkina Faso | Alinabal Inc | Ivan Magalhaes |
| Carissa Batman | Greece | Poletto, Kim David Esq | Ivan Magalhaes |
| Lezlie Craghead | Panama | Chang, Carolyn Esq | Xuxue Feng |
| Ozell Shealy | Pakistan | Silver Bros Inc | Bernardo Dominic |
| Arminda Parvis | Indonesia | Newtec Inc | Elwin Sharvill |
| Reita Leto | Belgium | Creative Business Systems | Ioni Bowcher |
| Yolando Luczki | France | Dal Tile Corporation | Ioni Bowcher |
| Lizette Stem | Slovakia | Edward S Katz | Stephen Shaw |
| Gregoria Pawlowicz | Egypt | Oh My Goodknits Inc | Stephen Shaw |
| Carin Deleo | China | Redeker, Debbie | Asiya Javayant |
| Chantell Maynerich | Estonia | Desert Sands Motel | Ivan Magalhaes |
| Dierdre Yum | Czech Republic | Cummins Southern Plains Inc | Onyama Limba |
| Larae Gudroe | Slovenia | Lehigh Furn Divsn Lehigh | Ioni Bowcher |
| Latrice Tolfree | Jamaica | United Van Lines Agent | Ioni Bowcher |
| Kerry Theodorov | Romania | Capitol Reporters | Amy Elsner |
| Dorthy Hidvegi | Poland | Kwik Kopy Printing | Ivan Magalhaes |
| Fannie Lungren | Belarus | Centro Inc | Stephen Shaw |
| Evangelina Radde | Ivory Coast | Campbell, Jan Esq | Anna Fali |
| Novella Degroot | Slovenia | Evans, C Kelly Esq | Amy Elsner |
| Clay Hoa | Paraguay | Scat Enterprises | Amy Elsner |
| Jennifer Fallick | Australia | Nagle, Daniel J Esq | Bernardo Dominic |
| Irma Wolfgramm | Belgium | Serendiquity Bed & Breakfast | Stephen Shaw |
| Eun Coody | Taiwan | Ray Carolyne Realty | Ioni Bowcher |
| Sylvia Cousey | Ireland | Berg, Charles E | Ioni Bowcher |
| Nana Wrinkles | Austria | Ray, Milbern D | Asiya Javayant |
| Layla Springe | South Africa | Chadds Ford Winery | Ioni Bowcher |
| Joesph Degonia | Serbia | A R Packaging | Elwin Sharvill |
| Annabelle Boord | Guatemala | Corn Popper | Anna Fali |
| Stephaine Vinning | Australia | Birite Foodservice Distr | Xuxue Feng |
| Nelida Sawchuk | South Africa | Anchorage Museum Of Hist & Art | Onyama Limba |
| Marguerita Hiatt | United Kingdom | Haber, George D Md | Anna Fali |
| Carmela Cookey | France | Royal Pontiac Olds Inc | Xuxue Feng |
| Junita Brideau | Indonesia | Leonards Antiques Inc | Anna Fali |
| Claribel Varriano | Ecuador | Meca | Onyama Limba |
| Benton Skursky | Iceland | Nercon Engineering & Mfg Inc | Asiya Javayant |
| Hillary Skulski | France | Replica I | Bernardo Dominic |
| Merilyn Bayless | Jamaica | 20 20 Printing Inc | Ivan Magalhaes |
| Teri Ennaco | Pakistan | Publishers Group West | Bernardo Dominic |
| Merlyn Lawler | Germany | Nischwitz, Jeffrey L Esq | Ivan Magalhaes |
| Georgene Montezuma | Senegal | Payne Blades & Wellborn Pa | Elwin Sharvill |
| Jettie Mconnell | Denmark | Coldwell Bnkr Wright Real Est | Ivan Magalhaes |
| Lemuel Latzke | Colombia | Computer Repair Service | Stephen Shaw |
| Melodie Knipp | Finland | Fleetwood Building Block Inc | Asiya Javayant |
| Candida Corbley | Poland | Colts Neck Medical Assocs Inc | Onyama Limba |
| Karan Karpin | Estonia | New England Taxidermy | Stephen Shaw |
| Andra Scheyer | Romania | Ludcke, George O Esq | Elwin Sharvill |
| Felicidad Poullion | Greece | Mccorkle, Tom S Esq | Elwin Sharvill |
| Belen Strassner | Ivory Coast | Eagle Software Inc | Xuxue Feng |
| Gracia Melnyk | Costa Rica | Juvenile & Adult Super | Asiya Javayant |
| Jolanda Hanafan | Cameroon | Perez, Joseph J Esq | Ivan Magalhaes |
<p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th pResizableColumn>Name</th>
<th pResizableColumn>Country</th>
<th pResizableColumn>Company</th>
<th pResizableColumn>Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{{customer.name}}</td>
<td>{{customer.country.name}}</td>
<td>{{customer.company}}</td>
<td>{{customer.representative.name}}</td>
</tr>
</ng-template>
</p-table>
Reorder #
Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding reorderableColumns property.
Similarly, adding reorderableRows property enables draggable rows. For the drag handle a column needs to have rowReorder property and onRowReorder callback is required to control the state of the rows after reorder completes.
| Code | Name | Category | Quantity | |
|---|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 | |
| nvklal433 | Black Watch | Accessories | 61 | |
| zz21cz3c1 | Blue Band | Fitness | 2 | |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 | |
| h456wer53 | Bracelet | Accessories | 73 | |
| av2231fwg | Brown Purse | Accessories | 0 | |
| bib36pfvm | Chakra Bracelet | Accessories | 5 | |
| mbvjkgip5 | Galaxy Earrings | Accessories | 23 | |
| vbb124btr | Game Controller | Electronics | 2 | |
| cm230f032 | Gaming Set | Electronics | 63 |
<p-table [value]="products" [columns]="cols" [reorderableColumns]="true" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width:3rem"></th>
<th *ngFor="let col of columns" pReorderableColumn>
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
<tr [pReorderableRow]="index">
<td>
<span class="pi pi-bars" pReorderableRowHandle></span>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
Column Toggle #
This demo uses a multiselect component to implement toggleable columns.
Name, Category, Quantity
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table [columns]="selectedColumns" [value]="products" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="caption">
<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
selectedItemsLabel="{0} columns selected" [style]="{'min-width': '200px'}" placeholder="Choose Columns"></p-multiSelect>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th>Code</th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product let-columns="columns">
<tr>
<td>{{product.code}}</td>
<td *ngFor="let col of columns">
{{product[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
Export #
Table can export its data in CSV format using the built-in exportCSV() function. By default, all data is exported. If you'd like to export only the selection then pass a config object with selectionOnly property as true. Note that columns should be dynamic for export functionality to work, and column objects must define field/header properties.
PDF and EXCEL export are also available using 3rd party libraries such as jspdf. Example below demonstrates how to implement all three export options.
| Code | Name | Category | Quantity |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | 24 |
| nvklal433 | Black Watch | Accessories | 61 |
| zz21cz3c1 | Blue Band | Fitness | 2 |
| 244wgerg2 | Blue T-Shirt | Clothing | 25 |
| h456wer53 | Bracelet | Accessories | 73 |
<p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [exportHeader]="'customExportHeader'" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="caption">
<div class="flex">
<button type="button" pButton pRipple icon="pi pi-file" (click)="dt.exportCSV()" class="mr-2" pTooltip="CSV" tooltipPosition="bottom"></button>
<button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success mr-2" pTooltip="XLS" tooltipPosition="bottom"></button>
<button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()" class="p-button-warning mr-2" pTooltip="PDF" tooltipPosition="bottom"></button>
<button type="button" pButton pRipple icon="pi pi-filter" (click)="dt.exportCSV({ selectionOnly: true })" class="p-button-info ml-auto" pTooltip="Selection Only" tooltipPosition="bottom"></button>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{ col.header }}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns">
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-table>
Context Menu #
Table has exclusive integration with contextmenu component. In order to attach a menu to a table, add pContextMenuRow directive to the rows that can be selected with context menu, define a local template variable for the menu and bind it to the contextMenu property of the table. This enables displaying the menu whenever a row is right clicked. Optional pContextMenuRowIndex property is available to access the row index. A separate contextMenuSelection property is used to get a hold of the right clicked row. For dynamic columns, setting pContextMenuRowDisabled property as true disables context menu for that particular row.
| Code | Name | Category | Price |
|---|---|---|---|
| f230fh0g3 | Bamboo Watch | Accessories | $65.00 |
| nvklal433 | Black Watch | Accessories | $72.00 |
| zz21cz3c1 | Blue Band | Fitness | $79.00 |
| 244wgerg2 | Blue T-Shirt | Clothing | $29.00 |
| h456wer53 | Bracelet | Accessories | $15.00 |
| av2231fwg | Brown Purse | Accessories | $120.00 |
| bib36pfvm | Chakra Bracelet | Accessories | $32.00 |
| mbvjkgip5 | Galaxy Earrings | Accessories | $34.00 |
| vbb124btr | Game Controller | Electronics | $99.00 |
| cm230f032 | Gaming Set | Electronics | $299.00 |
<p-contextMenu #cm [model]="items"></p-contextMenu>
<p-table [value]="products" [(contextMenuSelection)]="selectedProduct" [contextMenu]="cm" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Price</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr [pContextMenuRow]="product">
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.category}}</td>
<td>{{product.price | currency: 'USD'}}</td>
</tr>
</ng-template>
</p-table>
Stateful #
Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.
Change the state of the table e.g paginate, navigate away and then return to this table again to test this feature, the setting is set as session with the stateStorage property so that Table retains the state until the browser is closed. Other alternative is local referring to localStorage for an extended lifetime.
| Name | Country | Representative | Status |
|---|---|---|---|
| Name James Butt | CountryAlgeria | RepresentativeIoni Bowcher | Status |
| Name Josephine Darakjy | CountryEgypt | RepresentativeAmy Elsner | Status |
| Name Art Venere | CountryPanama | RepresentativeAsiya Javayant | Status |
| Name Lenna Paprocki | CountrySlovenia | RepresentativeXuxue Feng | Status |
| Name Donette Foller | CountrySouth Africa | RepresentativeAsiya Javayant | Status |
<p-table #dt1 [value]="customers" selectionMode="single" [(selection)]="selectedCustomers" dataKey="id" [tableStyle]="{'min-width': '50rem'}"
[rows]="10" [paginator]="true" stateStorage="session" stateKey="statedemo-session">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="name" style="width:25%">Name <p-sortIcon field="name"></p-sortIcon></th>
<th pSortableColumn="country.name" style="width:25%">Country <p-sortIcon field="country.name"></p-sortIcon></th>
<th pSortableColumn="representative.name" style="width:25%">Representative <p-sortIcon field="representative.name"></p-sortIcon></th>
<th pSortableColumn="status" style="width:25%">Status <p-sortIcon field="status"></p-sortIcon></th>
</tr>
<tr>
<th>
<input pInputText type="text" (input)="dt1.filter($event.target.value, 'name', 'contains')" [value]="dt1.filters['name']?.value" placeholder="Search by Name" class="w-full">
</th>
<th>
<input pInputText type="text" (input)="dt1.filter($event.target.value, 'country.name', 'contains')" [value]="dt1.filters['country.name']?.value" placeholder="Search by Country" class="w-full">
</th>
<th>
<input pInputText type="text" (input)="dt1.filter($event.target.value, 'representative.name', 'contains')" [value]="dt1.filters['representative.name']?.value" placeholder="Search by Representative" class="w-full">
</th>
<th>
<input pInputText type="text" (input)="dt1.filter($event.target.value, 'status', 'contains')" [value]="dt1.filters['status']?.value" placeholder="Search by Status" class="w-full">
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr [pSelectableRow]="customer">
<td>
<span class="p-column-title">Name</span>
{{customer.name}}
</td>
<td>
<span class="p-column-title">Country</span>
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px">
<span class="ml-1 vertical-align-middle">{{customer.country.name}}</span>
</td>
<td>
<span class="p-column-title">Representative</span>
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
<span class="ml-1 vertical-align-middle">{{customer.representative.name}}</span>
</td>
<td>
<span class="p-column-title">Status</span>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="4">No customers found.</td>
</tr>
</ng-template>
</p-table>
Samples #
List of Customers
Name | Country | Agent | Date | Balance | Status | Activity | ||
|---|---|---|---|---|---|---|---|---|
| Name James Butt | CountryAlgeria | RepresentativeIoni Bowcher | Date 09/13/2015 | Balance $70,663.00 | Status | Activity | ||
| Name Josephine Darakjy | CountryEgypt | RepresentativeAmy Elsner | Date 02/09/2019 | Balance $82,429.00 | Status | Activity | ||
| Name Art Venere | CountryPanama | RepresentativeAsiya Javayant | Date 05/13/2017 | Balance $28,334.00 | Status | Activity | ||
| Name Lenna Paprocki | CountrySlovenia | RepresentativeXuxue Feng | Date 09/15/2020 | Balance $88,521.00 | Status | Activity | ||
| Name Donette Foller | CountrySouth Africa | RepresentativeAsiya Javayant | Date 05/20/2016 | Balance $93,905.00 | Status | Activity | ||
| Name Simona Morasca | CountryEgypt | RepresentativeIvan Magalhaes | Date 02/16/2018 | Balance $50,041.00 | Status | Activity | ||
| Name Mitsue Tollner | CountryParaguay | RepresentativeIvan Magalhaes | Date 02/19/2018 | Balance $58,706.00 | Status | Activity | ||
| Name Leota Dilliard | CountrySerbia | RepresentativeOnyama Limba | Date 08/13/2019 | Balance $26,640.00 | Status | Activity | ||
| Name Sage Wieser | CountryEgypt | RepresentativeIvan Magalhaes | Date 11/21/2018 | Balance $65,369.00 | Status | Activity | ||
| Name Kris Marrier | CountryMexico | RepresentativeOnyama Limba | Date 07/07/2015 | Balance $63,451.00 | Status | Activity |
Showing 1 to 10 of 200 entries
<p-table
#dt
[value]="customers"
[(selection)]="selectedCustomers"
dataKey="id"
[rowHover]="true"
[rows]="10"
[showCurrentPageReport]="true"
[rowsPerPageOptions]="[10, 25, 50]"
[loading]="loading"
[paginator]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[filterDelay]="0"
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
>
<ng-template pTemplate="caption">
<div class="table-header">
List of Customers
<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: 4rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th pSortableColumn="name" style="min-width: 14rem">
<div class="flex justify-content-between align-items-center">
Name
<p-sortIcon field="name"></p-sortIcon>
<p-columnFilter type="text" field="name" display="menu" class="ml-auto"></p-columnFilter>
</div>
</th>
<th pSortableColumn="country.name" style="min-width: 14rem">
<div class="flex justify-content-between align-items-center">
Country
<p-sortIcon field="country.name"></p-sortIcon>
<p-columnFilter type="text" field="country.name" display="menu" class="ml-auto"></p-columnFilter>
</div>
</th>
<th pSortableColumn="representative.name" style="min-width: 14rem">
<div class="flex justify-content-between align-items-center">
Agent
<p-sortIcon field="representative.name"></p-sortIcon>
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false" class="ml-auto">
<ng-template pTemplate="header">
<div class="px-3 pt-3 pb-0">
<span class="font-bold">Agent Picker</span>
</div>
</ng-template>
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
<ng-template let-option pTemplate="item">
<div class="inline-block vertical-align-middle">
<img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
<span class="ml-1 mt-1">{{ option.name }}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</div>
</th>
<th pSortableColumn="date" style="min-width: 10rem">
<div class="flex justify-content-between align-items-center">
Date
<p-sortIcon field="date"></p-sortIcon>
<p-columnFilter type="date" field="date" display="menu" class="ml-auto"></p-columnFilter>
</div>
</th>
<th pSortableColumn="balance" style="min-width: 10rem">
<div class="flex justify-content-between align-items-center">
Balance
<p-sortIcon field="balance"></p-sortIcon>
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD" class="ml-auto"></p-columnFilter>
</div>
</th>
<th pSortableColumn="status" style="min-width: 10rem">
<div class="flex justify-content-between align-items-center">
Status
<p-sortIcon field="status"></p-sortIcon>
<p-columnFilter field="status" matchMode="equals" display="menu" class="ml-auto">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
<ng-template let-option pTemplate="item">
<p-tag [value]="option.label" [severity]="getSeverity(option.label)"></p-tag>
</ng-template>
</p-dropdown>
</ng-template>
</p-columnFilter>
</div>
</th>
<th pSortableColumn="activity" style="min-width: 10rem">
<div class="flex justify-content-between align-items-center">
Activity
<p-sortIcon field="activity"></p-sortIcon>
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false" class="ml-auto">
<ng-template pTemplate="filter" let-filter="filterCallback">
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
<div class="flex align-items-center justify-content-between px-2">
<span>{{ activityValues[0] }}</span>
<span>{{ activityValues[1] }}</span>
</div>
</ng-template>
</p-columnFilter>
</div>
</th>
<th style="width: 5rem"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr class="p-selectable-row">
<td>
<p-tableCheckbox [value]="customer"></p-tableCheckbox>
</td>
<td>
<span class="p-column-title">Name</span>
{{ customer.name }}
</td>
<td>
<span class="p-column-title">Country</span>
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
<span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
</td>
<td>
<span class="p-column-title">Representative</span>
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
<span class="ml-1 vertical-align-middle">{{ customer.representative.name }}</span>
</td>
<td>
<span class="p-column-title">Date</span>
{{ customer.date | date: 'MM/dd/yyyy' }}
</td>
<td>
<span class="p-column-title">Balance</span>
{{ customer.balance | currency: 'USD':'symbol' }}
</td>
<td>
<span class="p-column-title">Status</span>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
</td>
<td>
<span class="p-column-title">Activity</span>
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
</td>
<td style="text-align: center">
<button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="8">No customers found.</td>
</tr>
</ng-template>
</p-table>
Products #
CRUD implementation example with a Dialog.
Manage Products
| Name | Image | Price | Category | Reviews | Status | ||
|---|---|---|---|---|---|---|---|
| Bamboo Watch | | $65.00 | Accessories | ||||
| Black Watch | | $72.00 | Accessories | ||||
| Blue Band | | $79.00 | Fitness | ||||
| Blue T-Shirt | | $29.00 | Clothing | ||||
| Bracelet | | $15.00 | Accessories | ||||
| Brown Purse | | $120.00 | Accessories | ||||
| Chakra Bracelet | | $32.00 | Accessories | ||||
| Galaxy Earrings | | $34.00 | Accessories | ||||
| Game Controller | | $99.00 | Electronics | ||||
| Gaming Set | | $299.00 | Electronics |
Showing 1 to 10 of 30 entries
<p-toast></p-toast>
<p-toolbar styleClass="mb-4 gap-2">
<ng-template pTemplate="left">
<button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2" (click)="openNew()"></button>
<button pButton pRipple [label]="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
</ng-template>
<ng-template pTemplate="right">
<p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileUpload>
<button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help"></button>
</ng-template>
</p-toolbar>
<p-table
#dt
[value]="products"
[rows]="10"
[paginator]="true"
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
[tableStyle]="{ 'min-width': '75rem' }"
[(selection)]="selectedProducts"
[rowHover]="true"
dataKey="id"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[showCurrentPageReport]="true"
>
<ng-template pTemplate="caption">
<div class="flex align-items-center justify-content-between">
<h5 class="m-0">Manage Products</h5>
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 4rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th pSortableColumn="name" style="min-width:15rem">Name <p-sortIcon field="name"></p-sortIcon></th>
<th>Image</th>
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
<th pSortableColumn="category" style="min-width:10rem">Category <p-sortIcon field="category"></p-sortIcon></th>
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
<th pSortableColumn="inventoryStatus" style="min-width:10rem">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
<p-tableCheckbox [value]="product"></p-tableCheckbox>
</td>
<td>{{ product.name }}</td>
<td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="50" class="shadow-4" /></td>
<td>{{ product.price | currency: 'USD' }}</td>
<td>{{ product.category }}</td>
<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
<td>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
</td>
<td>
<button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button>
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(product)"></button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="summary">
<div class="flex align-items-center justify-content-between">In total there are {{ products ? products.length : 0 }} products.</div>
</ng-template>
</p-table>
Styling #
| Name | Element |
|---|---|
| p-datatable | Container element. |
| p-datatable-header | Header section. |
| p-datatable-footer | Footer section. |
| p-sortable-column | Sortable column header. |
| p-editable-column | Editable column cell. |
| p-datatable-thead | Thead element of header columns. |
| p-datatable-tbody | Tbody element of body rows. |
| p-datatable-tfoot | Tfoot element of footer columns. |
| p-datatable-scrollable | Container element when scrolling is enabled. |
| p-datatable-resizable | Container element when column resizing is enabled. |
| p-datatable-resizable-fit | Container element when column resizing is enabled and set to fit mode. |
| p-column-resizer-helper | Vertical resizer indicator bar. |
| p-datatable-reorderablerow-handle | Handle element of a reorderable row. |
| p-datatable-reorder-indicator-up | Up indicator to display during column reordering. |
| p-datatable-reorder-indicator-up | Down indicator to display during column reordering. |
| p-datatable-loading-overlay | Overlay to display when table is loading. |
| p-datatable-loading-icon | Icon to display when table is loading. |
Accessibility #
Screen Reader
Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to "ascending" or "descending".
Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.
Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton. The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row.
The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties of the locale API.
The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup, aria-expanded and aria-controls to define the relation between the button and the overlay. Popop menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and aria.apply properties. filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well.
Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow, aria.cancelEdit and aria.saveEdit used for the aria-label.
Paginator is a standalone component used inside the Table, refer to the paginator for more information about the accessibility features.
Keyboard Support
Any button element inside the Table used for cases like filter, row expansion, edit are tabbable and can be used with space and enter keys.
Sortable Headers Keyboard Support
| Key | Function |
|---|---|
| tab | Moves through the headers. |
| enter | Sorts the column. |
| space | Sorts the column. |
Filter Menu Keyboard Support
| Key | Function |
|---|---|
| tab | Moves through the elements inside the popup. |
| escape | Hides the popup. |
Selection Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the first selected row, if there is none then first row receives the focus. |
| up arrow | Moves focus to the previous row. |
| down arrow | Moves focus to the next row. |
| enter | Toggles the selected state of the focused row depending on the metaKeySelection setting. |
| space | Toggles the selected state of the focused row depending on the metaKeySelection setting. |
| home | Moves focus to the first row. |
| end | Moves focus to the last row. |
| shift + down arrow | Moves focus to the next row and toggles the selection state. |
| shift + up arrow | Moves focus to the previous row and toggles the selection state. |
| shift + space | Selects the rows between the most recently selected row and the focused row. |
| control + shift + home | Selects the focused rows and all the options up to the first one. |
| control + shift + end | Selects the focused rows and all the options down to the last one. |
| control + a | Selects all rows. |
Table API
API defines helper props, events and others for the PrimeNG Table module.
Table #
Table displays data in tabular format.
Properties #
Defines the input properties of the component.
Emitters #
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| contextMenuSelectionChange | value : any | Callback to invoke on context menu selection change. | |
| selectAllChange | event : TableSelectAllChangeEvent | Emits when the all of the items selected or unselected. | |
| selectionChange | value : any | Callback to invoke on selection changed. | |
| onRowSelect | event : TableRowSelectEvent | Callback to invoke when a row is selected. | |
| onRowUnselect | event : TableRowUnSelectEvent | Callback to invoke when a row is unselected. | |
| onPage | event : TablePageEvent | Callback to invoke when pagination occurs. | |
| onSort | value : any | Callback to invoke when a column gets sorted. | |
| onFilter | event : TableFilterEvent | Callback to invoke when data is filtered. | |
| onLazyLoad | event : TableLazyLoadEvent | Callback to invoke when paging, sorting or filtering happens in lazy mode. | |
| onRowExpand | event : TableRowExpandEvent | Callback to invoke when a row is expanded. | |
| onRowCollapse | event : TableRowCollapseEvent | Callback to invoke when a row is collapsed. | |
| onContextMenuSelect | event : TableContextMenuSelectEvent | Callback to invoke when a row is selected with right click. | |
| onColResize | event : TableColResizeEvent | Callback to invoke when a column is resized. | |
| onColReorder | event : TableColumnReorderEvent | Callback to invoke when a column is reordered. | |
| onRowReorder | event : TableRowReorderEvent | Callback to invoke when a row is reordered. | |
| onEditInit | event : TableEditInitEvent | Callback to invoke when a cell switches to edit mode. | |
| onEditComplete | event : TableEditCompleteEvent | Callback to invoke when cell edit is completed. | |
| onEditCancel | event : TableEditCancelEvent | Callback to invoke when cell edit is cancelled with escape key. | |
| onHeaderCheckboxToggle | event : TableHeaderCheckboxToggleEvent | Callback to invoke when state of header checkbox changes. | |
| sortFunction | value : any | A function to implement custom sorting, refer to sorting section for details. | |
| firstChange | value : number | Callback to invoke on pagination. | |
| rowsChange | value : number | Callback to invoke on rows change. | |
| onStateSave | value : TableState | Callback to invoke table state is saved. | |
| onStateRestore | value : TableState | Callback to invoke table state is restored. |
Methods #
Defines methods that can be accessed by the component's reference.
Templates #
Defines the templates used by the component.
Events #
Defines the custom events used by the component's emitters.
TableRowSelectEvent #
Custom select event.
TableRowUnSelectEvent #
Custom unselect event.
TableFilterEvent #
Custom filter event.
TableLazyLoadEvent #
Custom lazy load event.
TableRowExpandEvent #
Custom row expand event.
TableRowCollapseEvent #
Custom row collapse event.
TableContextMenuSelectEvent #
Custom context menu select event.
TableContextMenuSelectionChangeEvent #
Custom context menu selection change event.
TableColResizeEvent #
Custom column resize event.
TableColumnReorderEvent #
Custom column reorder event.
TableRowReorderEvent #
Custom row reorder event.
TableEditEvent #
Custom edit event.
TableEditInitEvent #
Custom edit init event.
TableEditCancelEvent #
Custom edit cancel event.
TableEditCompleteEvent #
Custom edit complete event.
TableHeaderCheckboxToggleEvent #
Custom checkbox toggle event.
TableSelectAllChangeEvent #
Custom all selection change event.