Skip to content

Commit

Permalink
Merge pull request #14474 from primefaces/deferred-demo
Browse files Browse the repository at this point in the history 
Improve DataTable demo performance
  • Loading branch information
@cetincakiroglu
cetincakiroglu authored Jan 4, 2024
2 parents 0c522bd + 30507a3 commit 4d28c37
Show file tree
Hide file tree
Showing 53 changed files with 1,536 additions and 1,368 deletions.
10 changes: 10 additions & 0 deletions src/app/showcase/demo/deferreddemo.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.demo-section-loading {
display: grid;
place-items: center;
padding: 2rem;
border-radius: 10px;
margin-bottom: 1rem;
font-size: 2rem;
height: 350px;
background: var(--maskbg);
}
54 changes: 54 additions & 0 deletions src/app/showcase/demo/deferreddemo.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { CommonModule, isPlatformBrowser } from '@angular/common';
import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, PLATFORM_ID } from '@angular/core';

@Component({
selector: 'p-deferred-demo',
standalone: true,
imports: [CommonModule],
template: `
@if(!visible){
<div class="demo-section-loading">Loading...</div>
} @else {
<ng-content></ng-content>
}
`,
styleUrl: './deferreddemo.scss'
})
export class DeferredDemo implements OnInit {
visible: boolean = false;

observer = null;

timeout = null;

@Input() options: any;

@Output() load: EventEmitter<boolean> = new EventEmitter<boolean>();

constructor(public el: ElementRef, @Inject(PLATFORM_ID) private platformId: any) {}

ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
this.observer = new IntersectionObserver(([entry]) => {
clearTimeout(this.timeout);

if (entry.isIntersecting) {
this.timeout = setTimeout(() => {
this.visible = true;
this.observer.unobserve(this.el.nativeElement);
this.load.emit();
}, 350);
}
}, this.options);

this.observer.observe(this.el.nativeElement);
}
}

ngOnDestroy() {
if (!this.visible && this.el.nativeElement) {
this.observer?.unobserve(this.el.nativeElement);
}
clearTimeout(this.timeout);
}
}
48 changes: 25 additions & 23 deletions src/app/showcase/doc/table/basicdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,43 @@ import { ProductService } from '../../service/productservice';
template: ` <app-docsectiontext>
<p>DataTable requires a collection to display along with column components for the representation of the data.</p>
</app-docsectiontext>
<div class="card">
<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>
</div>
<p-deferred-demo (load)="loadDemoData()">
<div class="card">
<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>
</div>
</p-deferred-demo>
<app-code [code]="code" selector="table-basic-demo" [extFiles]="extFiles"></app-code>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BasicDoc implements OnInit {
export class BasicDoc {
products!: Product[];

constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}

ngOnInit() {
loadDemoData() {
this.productService.getProductsMini().then((data) => {
this.products = data;
this.cd.markForCheck();
});
}

code: Code = {
basic: `<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="header">
Expand Down
120 changes: 61 additions & 59 deletions src/app/showcase/doc/table/celleditdoc.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { Code } from '../../domain/code';
import { Product } from '../../domain/product';
import { ProductService } from '../../service/productservice';
Expand All @@ -8,71 +8,73 @@ import { ProductService } from '../../service/productservice';
template: ` <app-docsectiontext>
<p>In-cell editing is enabled by adding <i>pEditableColumn</i> directive to an editable cell that has a <i>p-cellEditor</i> helper component to define the input-output templates for the edit and view modes respectively.</p>
</app-docsectiontext>
<div class="card">
<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>
</div>
<p-deferred-demo (load)="loadDemoData()">
<div class="card">
<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>
</div>
</p-deferred-demo>
<app-code [code]="code" selector="table-cell-edit-demo" [extFiles]="extFiles"></app-code>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CellEditDoc implements OnInit {
export class CellEditDoc {
products!: Product[];

constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}

ngOnInit() {
loadDemoData() {
this.productService.getProductsMini().then((data) => {
this.products = data;
this.cd.markForCheck();
Expand Down
58 changes: 30 additions & 28 deletions src/app/showcase/doc/table/checkboxselectiondoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,45 @@ import { ProductService } from '../../service/productservice';
template: ` <app-docsectiontext>
<p>Multiple selection can also be handled using checkboxes by enabling the <i>selectionMode</i> property of column as <i>multiple</i>.</p>
</app-docsectiontext>
<div class="card">
<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>
</div>
<p-deferred-demo (load)="loadDemoData()">
<div class="card">
<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>
</div>
</p-deferred-demo>
<app-code [code]="code" selector="table-checkbox-selection-demo" [extFiles]="extFiles"></app-code>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CheckboxSelectionDoc implements OnInit {
export class CheckboxSelectionDoc {
products!: Product[];

selectedProducts!: Product;

constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}

ngOnInit() {
loadDemoData() {
this.productService.getProductsMini().then((data) => {
this.products = data;
this.cd.markForCheck();
Expand Down
4 changes: 3 additions & 1 deletion src/app/showcase/doc/table/columngroupdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Code } from '../../domain/code';
template: ` <app-docsectiontext>
<p>Columns can be grouped using rowspan and <i>colspan</i> properties.</p>
</app-docsectiontext>
<p-deferred-demo (load)="loadDemoData()">
<div class="card">
<p-table [value]="sales" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="header">
Expand Down Expand Up @@ -42,6 +43,7 @@ import { Code } from '../../domain/code';
</ng-template>
</p-table>
</div>
</p-deferred-demo>
<app-code [code]="code" selector="table-column-group-demo"></app-code>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
Expand All @@ -54,7 +56,7 @@ export class ColumnGroupDoc {

constructor(private cd: ChangeDetectorRef) {}

ngOnInit() {
loadDemoData() {
this.sales = [
{ product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
{ product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
Expand Down
Loading

0 comments on commit 4d28c37

Please sign in to comment.