Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve DataTable demo performance #14474

Merged
merged 3 commits into from
Jan 4, 2024
+1,536 −1,368
Merged

Improve DataTable demo performance #14474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
928b5a1
Improve DataTable demo performance
mehmetcetin01140 Jan 3, 2024
4b49e6b
Update structure
cetincakiroglu Jan 4, 2024
30507a3
Refactor
cetincakiroglu Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/app/showcase/demo/deferreddemo.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading