Skip to content

Commit

Permalink
Fixed broken demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Nov 6, 2023
1 parent 9cfbd32 commit 97876b9
Showing 1 changed file with 28 additions and 44 deletions.
72 changes: 28 additions & 44 deletions src/app/showcase/doc/table/columntoggledoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,33 @@ interface Column {
<p>This demo uses a multiselect component to implement toggleable columns.</p>
</app-docsectiontext>
<div class="card">
<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>
<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>
</div>
<app-code [code]="code" selector="table-column-toggle-demo" [extFiles]="extFiles"></app-code>
</section>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnToggleDoc implements OnInit {
export class ColumnToggleDoc {
@Input() id: string;

@Input() title: string;
Expand All @@ -49,7 +49,7 @@ export class ColumnToggleDoc implements OnInit {

cols!: Column[];

_selectedColumns!: Column[];
selectedColumns!: Column[];

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

Expand All @@ -65,16 +65,7 @@ export class ColumnToggleDoc implements OnInit {
{ field: 'quantity', header: 'Quantity' }
];

this._selectedColumns = this.cols;
}

@Input() get selectedColumns(): any[] {
return this._selectedColumns;
}

set selectedColumns(val: any[]) {
//restore original order
this._selectedColumns = this.cols.filter((col) => val.includes(col));
this.selectedColumns = this.cols;
}

code: Code = {
Expand Down Expand Up @@ -145,13 +136,14 @@ export class TableColumnToggleDemo implements OnInit{
cols!: Column[];
_selectedColumns!: Column[];
selectedColumns!: Column[];
constructor(private productService: ProductService) {}
constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
ngOnInit() {
this.productService.getProductsMini().then((data) => {
this.products = data;
this.cd.markForCheck();
});
this.cols = [
Expand All @@ -160,17 +152,9 @@ export class TableColumnToggleDemo implements OnInit{
{ field: 'quantity', header: 'Quantity' }
];
this._selectedColumns = this.cols;
}
@Input() get selectedColumns(): any[] {
return this._selectedColumns;
this.selectedColumns = this.cols;
}
set selectedColumns(val: any[]) {
//restore original order
this._selectedColumns = this.cols.filter((col) => val.includes(col));
}
}`,
data: `{
id: '1000',
Expand Down

1 comment on commit 97876b9

@vercel
Copy link

@vercel vercel bot commented on 97876b9 Nov 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test-git-master-primeng-test.vercel.app
primeng-ssr-test.vercel.app
primeng-ssr-test-primeng-test.vercel.app

Please sign in to comment.