DataTable requires a collection to display along with column components for the representation of the data.
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+ 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
-
-
-
-
-
-
-
-
-
-
- {{ product.code }}
-
-
-
-
-
-
-
-
-
- {{ product.name }}
-
-
-
-
-
-
-
-
-
- {{ product.inventoryStatus }}
-
-
-
-
-
-
-
-
-
- {{ product.price | currency : 'USD' }}
-
-
-
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Inventory Status
+ Price
+
+
+
+
+
+
+
+
+
+
+ {{ product.code }}
+
+
+
+
+
+
+
+
+
+ {{ product.name }}
+
+
+
+
+
+
+
+
+
+ {{ product.inventoryStatus }}
+
+
+
+
+
+
+
+
+
+ {{ product.price | currency : 'USD' }}
+
+
+
+
+
+
+
+ Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as multiple.
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+ Columns can be grouped using rowspan and colspan properties.
Setting columnResizeMode as expand changes the table width as well.
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+ 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.
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
+ template: `
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+ Selection using custom elements.
This demo uses a multiselect component to implement toggleable columns.
-
-
-
-
-
- Code
-
- {{ col.header }}
-
-
-
-
-
- {{ product.code }}
-
- {{ product[col.field] }}
-
-
-
-
-
+
+
+
+
+
+
+ Code
+
+ {{ col.header }}
+
+
+
+
+
+ {{ product.code }}
+
+ {{ product[col.field] }}
+
+
+
+
+
+
-
-
-
- Code
- Name
- Category
- Price
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.price | currency : 'USD' }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Price
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.price | currency : 'USD' }}
+
+
+
+
+ Row selection can be controlled by utilizing rowSelectable and disabled properties.
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+ DataTable with selection, pagination, filtering, sorting and templating.
Columns can be defined dynamically using the *ngFor directive.
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
-
-
-
-
-
-
- 
- {{ customer.representative.name }}
-
-
-
-
-
- Total Customers
- {{ calculateCustomerTotal(customer.representative.name) }}
-
-
-
-
-
- {{ customer.name }}
-
-
- 
- {{ customer.country.name }}
-
-
- {{ customer.company }}
-
-
-
-
- {{ customer.date }}
-
-
-
-
-
+
- {{ customer.representative.name }}
-
- {{ customer.country.name }}
-
+
+
+
+ Name
+ Country
+ Company
+ Status
+ Date
+
+
+
+
+
+
+
+ {{ customer.representative.name }}
+
+
+
+
+
+ Total Customers
+ {{ calculateCustomerTotal(customer.representative.name) }}
+
+
+
+
+
+ {{ customer.name }}
+
+
+
+ {{ customer.country.name }}
+
+
+ {{ customer.company }}
+
+
+
+
+ {{ customer.date }}
+
+
+
+
+
+
+ {{ customer.representative.name }}
+
+ {{ customer.country.name }}
+ PDF and EXCEL export are also available using 3rd party libraries such as jspdf. Example below demonstrates how to implement all three export options.
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
+
-
-
-
-
-
-
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+
+
+
+
+
+
+ Filters are displayed in an overlay.
Filters are displayed inline within a separate row.
-
-
-
-
-
- Name
- Country
- Agent
- Status
- Verified
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ customer.name }}
-
-
-
- {{ customer.country.name }}
-
-
-
- {{ customer.representative.name }}
-
-
-
-
-
-
-
-
-
-
- No customers found.
-
-
-
-
+
-
-
-
- 
- {{ option.name }}
-
-
- {{ option.name }}
-
- {{ customer.country.name }}
-
- {{ customer.representative.name }}
-
+
+
+
+
+
+ Name
+ Country
+ Agent
+ Status
+ Verified
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ customer.name }}
+
+
+
+ {{ customer.country.name }}
+
+
+
+ {{ customer.representative.name }}
+
+
+
+
+
+
+
+
+
+
+ No customers found.
+
+
+
+
+
+
+
+
+
+ {{ option.name }}
+
+
+ {{ option.name }}
+
+ {{ customer.country.name }}
+
+ {{ customer.representative.name }}
+
@@ -39,17 +40,18 @@ import { CustomerService } from '../../service/customerservice';
+
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
-
-
-
-
- {{ customer.name }}
- {{ customer.id }}
- {{ customer.country.name }}
- {{ customer.date }}
- {{ customer.company }}
- {{ customer.status }}
- {{ customer.activity }}
- {{ customer.representative.name }}
- {{ formatCurrency(customer.balance) }}
-
-
-
-
+
+
+
+
+ Name
+ Id
+ Country
+ Date
+ Company
+ Status
+ Activity
+ Representative
+ Balance
+
+
+
+
+ {{ customer.name }}
+ {{ customer.id }}
+ {{ customer.country.name }}
+ {{ customer.date }}
+ {{ customer.company }}
+ {{ customer.status }}
+ {{ customer.activity }}
+ {{ customer.representative.name }}
+ {{ formatCurrency(customer.balance) }}
+
+
+
+
+ Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property.
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
-
-
+
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+
+
+ Adding p-datatable-gridlines class displays grid lines.
-
- Header
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
- Footer
-
-
+
+
+ Header
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+ Footer
+
+
+ Horizontal and vertical scroll can be used together to enable double axis scrolling.
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
+
-
- {{ option.name }}
-
-
- {{ option.name }}
-
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+
+ {{ option.name }}
+
+
+ {{ option.name }}
+ Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.
-
-
-
- Code
- Name
- Category
- Quantity
- Price
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
- {{ product.price | currency : 'USD' }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+ Price
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+ {{ product.price | currency : 'USD' }}
+
+
+
+
+
-
+
+
-
+
+
-
-
+
- Multiple Selection with MetaKey
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+ Multiple Selection with MetaKey
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
-
+
+
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+ template: `
+
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
-
-
-
+
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+
+
+
+ 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
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
-
-
-
+
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+
+
+
+ Paginator can also be controlled via model using a binding to the first property where changes trigger a pagination.
CRUD implementation example with a Dialog.
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+
+
+
+
+ {{ product.name }}
+ ![]()
{{ product.price | currency : 'USD' }}
+ {{ product.category }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
-
-
-
-
-
-
-
-
-
-
- Name
- Image
- Price
- Category
- Reviews
- Status
-
-
-
-
-
-
- {{ product.name }}
- ![]()
{{ product.price | currency : 'USD' }}
- {{ product.category }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ![]()
-
+
+ Manage Products
+ +In total there are {{ products ? products.length : 0 }} products.
+
+
+
+ Name is required.
+
+
+
+
+
-
-
- Manage Products
- -In total there are {{ products ? products.length : 0 }} products.
-
-
-
- Name is required.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
@@ -79,15 +80,16 @@ import { ProductService } from '../../service/productservice';
+
-
+
+
@@ -30,18 +31,19 @@ import { ProductService } from '../../service/productservice';
+
@@ -34,15 +35,16 @@ import { ProductService } from '../../service/productservice';
+
+
-
-
-
-
-
+
-
+
+
+
+
+
+
+
-
-
+
-
-
-
-
-
-
+
+
+
+
+
-
+
+
+
-
+
+
+
+
+
-
-
-
+
-
+
-
+
+
+
+
+
Single selection can also be handled using radio buttons.
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+ 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.
-
-
-
-
- Name
- Price
- Category
- Quantity
- Status
- Reviews
-
-
-
-
- {{ product.name }}
- {{ product.price | currency : 'USD' }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
-
-
+
+
+
+
+ Name
+ Price
+ Category
+ Quantity
+ Status
+ Reviews
+
+
+
+
+ {{ product.name }}
+ {{ product.price | currency : 'USD' }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+
+
+
-
-
-
- Name
- Price
- Category
- Quantity
- Status
- Reviews
-
-
-
-
- Name{{ product.name }}
- Price{{ product.price | currency : 'USD' }}
- Category{{ product.category }}
- Quantity{{ product.quantity }}
- Reviews
-
-
-
-
+
+
+
+
+ Name
+ Price
+ Category
+ Quantity
+ Status
+ Reviews
+
+
+
+
+ Name{{ product.name }}
+ Price{{ product.price | currency : 'USD' }}
+ Category{{ product.category }}
+ Quantity{{ product.quantity }}
+ Reviews
+
+
+
+
+
-
-
-
- Code
- Name
- Inventory Status
- Price
-
-
-
-
-
-
-
-
-
-
- {{ product.code }}
-
-
-
-
-
-
-
-
-
- {{ product.name }}
-
-
-
-
-
-
-
-
- {{ product.inventoryStatus }}
-
-
-
-
-
-
-
-
-
- {{ product.price | currency : 'USD' }}
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
+
+
+
+ Code
+ Name
+ Inventory Status
+ Price
+
+
+
+
+
+
+
+
+
+
+ {{ product.code }}
+
+
+
+
+
+
+
+
+
+ {{ product.name }}
+
+
+
+
+
+
+
+
+ {{ product.inventoryStatus }}
+
+
+
+
+
+
+
+
+
+ {{ product.price | currency : 'USD' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ When rowGroupMode is configured to be rowspan, the grouping column spans multiple rows.
-
-
-
- #
- Representative
- Name
- Country
- Company
- Status
- Date
-
-
-
-
- {{ rowIndex }}
-
-
- {{ customer.representative.name }}
-
-
- {{ customer.name }}
-
-
-
- {{ customer.country.name }}
-
-
- {{ customer.company }}
-
-
-
-
- {{ customer.date }}
-
-
-
-
-
+
- {{ customer.representative.name }}
-
- {{ customer.country.name }}
-
+
+
+
+ #
+ Representative
+ Name
+ Country
+ Company
+ Status
+ Date
+
+
+
+
+ {{ rowIndex }}
+
+
+ {{ customer.representative.name }}
+
+
+ {{ customer.name }}
+
+
+
+ {{ customer.country.name }}
+
+
+ {{ customer.company }}
+
+
+
+
+ {{ customer.date }}
+
+
+
+
+
+
+ {{ customer.representative.name }}
+
+ {{ customer.country.name }}
+ Table provides onRowSelect and onRowUnselect events to listen selection events.
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.
+
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+ In addition to a regular table, alternatives with alternative sizes are available.
-
@@ -65,17 +66,18 @@ import { CustomerService } from '../../service/customerservice';
+
-
+
-
+
+
-
+
-
+
@@ -34,10 +35,11 @@ interface Column {
+
+
`,
- styleUrls: ['./deferreddemo.css'],
- host: {
- class: 'p-element'
- }
+ styleUrl: './deferreddemo.scss'
})
export class DeferredDemo implements OnInit {
visible: boolean = false;
@@ -52,10 +50,3 @@ export class DeferredDemo implements OnInit {
clearTimeout(this.timeout);
}
}
-
-@NgModule({
- imports: [CommonModule, SharedModule],
- exports: [DeferredDemo, SharedModule],
- declarations: [DeferredDemo]
-})
-export class DeferredDemoModule {}
diff --git a/src/app/showcase/doc/table/tabledoc.module.ts b/src/app/showcase/doc/table/tabledoc.module.ts
index 36925424477..5bc4c656249 100644
--- a/src/app/showcase/doc/table/tabledoc.module.ts
+++ b/src/app/showcase/doc/table/tabledoc.module.ts
@@ -81,7 +81,8 @@ import { StylingDoc } from './stylingdoc';
import { SelectionEventsDoc } from './selectioneventsdoc';
import { AccessibilityDoc } from './accessibilitydoc';
import { PaginatorLocaleDoc } from './paginatorlocaledoc';
-import { DeferredDemoModule } from 'primeng/demo';
+import { DeferredDemo } from '../../demo/deferreddemo';
+
@NgModule({
imports: [
CommonModule,
@@ -113,7 +114,7 @@ import { DeferredDemoModule } from 'primeng/demo';
SelectButtonModule,
AppCodeModule,
AppDocModule,
- DeferredDemoModule
+ DeferredDemo
],
declarations: [
ImportDoc,
From 30507a3208ca74d9c5d0d8b61567f747dbdd8d63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
<69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 4 Jan 2024 10:46:53 +0300
Subject: [PATCH 3/3] Refactor
---
src/app/showcase/demo/deferreddemo.ts | 10 ++++++----
1 file changed, 6 insertions(+), 4 deletions(-)
diff --git a/src/app/showcase/demo/deferreddemo.ts b/src/app/showcase/demo/deferreddemo.ts
index 45694fa6f3e..c4f76e9fbc6 100755
--- a/src/app/showcase/demo/deferreddemo.ts
+++ b/src/app/showcase/demo/deferreddemo.ts
@@ -6,10 +6,11 @@ import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, PLA
standalone: true,
imports: [CommonModule],
template: `
-
-
+ @if(!visible){
+
-
+
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
-
+
+ Adding p-datatable-striped class displays striped rows.
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+ Certain rows or cells can easily be styled based on conditions.
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
-
-
-
-
-
-
+
- {{ product.quantity }}
-
-
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+
+
+
+
+
+
+
+ {{ product.quantity }}
+
+
-
-
-
- Name
- Country
- Company
- Status
- Date
-
-
-
-
-
-
- {{ customer.representative.name }}
-
-
-
-
-
- Total Customers: {{ calculateCustomerTotal(customer.representative.name) }}
-
-
-
-
-
- {{ customer.name }}
-
-
-
- {{ customer.country.name }}
-
-
- {{ customer.company }}
-
-
-
-
- {{ customer.date }}
-
-
-
-
-
+
- {{ customer.representative.name }}
-
- {{ customer.country.name }}
-
+
+
+
+ Name
+ Country
+ Company
+ Status
+ Date
+
+
+
+
+
+
+ {{ customer.representative.name }}
+
+
+
+
+
+ Total Customers: {{ calculateCustomerTotal(customer.representative.name) }}
+
+
+
+
+
+ {{ customer.name }}
+
+
+
+ {{ customer.country.name }}
+
+
+ {{ customer.company }}
+
+
+
+
+ {{ customer.date }}
+
+
+
+
+
+
+ {{ customer.representative.name }}
+
+ {{ customer.country.name }}
+ Custom content at header, body and footer sections are supported via templating.
-
-
-
-
-
- Name
- Image
- Price
- Category
- Reviews
- Status
-
-
-
-
- {{ product.name }}
- ![]()
{{ product.price | currency : 'USD' }}
- {{ product.category }}
-
-
-
-
-
-
-
-
+
- Products
-
- In total there are {{ products ? products.length : 0 }} products.
-
+
+
+
+
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+
+
+ {{ product.name }}
+ ![]()
{{ product.price | currency : 'USD' }}
+ {{ product.category }}
+
+
+
+
+
+
+
+
+
+ Products
+
+ In total there are {{ products ? products.length : 0 }} products.
+ Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
+
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
Loading...
- Loading...
+ } @else {
+