Import #
import { TableModule } from 'primeng/table';Basic #
DataTable requires a collection to display along with column components for the representation of the data.
<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.
<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.
<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.
<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.
<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.
<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.
<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 #
Scroll #
When there is not enough space for the table to fit all the content efficiently, table displays a horizontal scrollbar. It is suggested to give a min-width to the table to avoid design issues due wrapping of cell contents.
Following table displays a horizontal scrollbar when viewport is smaller than 50rem.
<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.
<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 #
Basic #
Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page. For server side pagination, see the lazy loading example.
<p-table [value]="customers" [paginator]="true" [rows]="5" [showCurrentPageReport]="true" [tableStyle]="{ 'min-width': '50rem' }" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[5, 10, 20]"> <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.
<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.
<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" [first]="first" [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 #
Single Column #
A column can be made sortable by adding the pSortableColumn directive whose value is the field to sort against and a sort indicator via p-sortIcon component. For dynamic columns, setting pSortableColumnDisabled property as true disables sorting for that particular column.
Default sorting is executed on a single column, in order to enable multiple field sorting, set sortMode property to "multiple" and use metakey when clicking on another column.
<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>Multiple Column #
Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.
<p-table [value]="products1" [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.
<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 #
Filter Menu #
Filters are displayed in an overlay.
<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.
<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 #
Single Selection #
Single row selection is enabled by defining selectionMode as single along with a value binding using selection property. When available, it is suggested to provide a unique identifier of a row with dataKey to optimize performance.
By default, metaKey press (e.g. ⌘) is necessary to unselect a row however this can be configured with disabling the metaKeySelection property. In touch enabled devices this option has no effect and behavior is same as setting it to false.
<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.
<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.
<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.
<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.
<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 #
<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.
<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.
<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.
<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 #
Row Edit #
Row editing toggles the visibility of all the editors in the row at once and provides additional options to save and cancel editing. Row editing functionality is enabled by setting the editMode to "row" on table, defining a dataKey to uniquely identify a row, adding pEditableRow directive to the editable rows and defining the UI Controls with pInitEditableRow, pSaveEditableRow and pCancelEditableRow directives respectively.
Save and Cancel functionality implementation is left to the page author to provide more control over the editing business logic. Example below utilizes a simple implementation where a row is cloned when editing is initialized and is saved or restored depending on the result of the editing. An implicit variable called "editing" is passed to the body template so you may come up with your own UI controls that implement editing based on your own requirements such as adding validations and styling. Note that pSaveEditableRow only switches the row to back view mode when there are no validation errors.
Moreover, you may use setting pEditableRowDisabled property as true to disable editing for that particular row and in case you need to display rows in edit mode by default, use the editingRowKeys property which is a map whose key is the dataKey of the record where the value is any arbitrary number greater than zero.
<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.
<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.
<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 #
Vertical Scroll #
Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.
<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.
<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.
<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.
<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 #
Preload #
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.
<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.
<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.
<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 #
Subheader #
Rows are grouped with the groupRowsBy property. When rowGroupMode is set as subheader, a header and footer can be displayed for each group. The content of a group header is provided with groupheader and footer with groupfooter templates.
<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.
<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.
<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 #
Fit Mode #
Columns can be resized using drag drop by setting the resizableColumns to true. Fit mode is the default one and the overall table width does not change when a column is resized.
<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.
<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 #
<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.
<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.
<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.
<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.
<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.
<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 #
Customers #
DataTable with selection, pagination, filtering, sorting and templating.
<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.
<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. |
| enter | Opens 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. |
