From e9a9b4571059077a22dfd10c2b6f97a588984401 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Fri, 4 Feb 2022 12:30:03 +0300 Subject: [PATCH 1/6] Fixed #11120 - Table | Custom Table CSV Export Headers --- src/app/components/table/table.ts | 2 +- src/app/showcase/components/table/tableexportdemo.html | 2 +- src/app/showcase/components/table/tableexportdemo.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 129fb9acef4..057dcddd092 100755 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -1696,7 +1696,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable for (let i = 0; i < columns.length; i++) { let column = columns[i]; if (column.exportable !== false && column.field) { - csv += '"' + (column.header || column.field) + '"'; + csv += '"' + (column.exportHeader || column.header || column.field) + '"'; if (i < (columns.length - 1)) { csv += this.csvSeparator; diff --git a/src/app/showcase/components/table/tableexportdemo.html b/src/app/showcase/components/table/tableexportdemo.html index a3d6d1afedf..b9eb3c5446c 100755 --- a/src/app/showcase/components/table/tableexportdemo.html +++ b/src/app/showcase/components/table/tableexportdemo.html @@ -97,7 +97,7 @@

Table Export

this.productService.getProductsSmall().then(data => this.products = data); this.cols = [ - { field: 'code', header: 'Code' }, + { field: 'code', header: 'Code', customHeader: 'Product Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } diff --git a/src/app/showcase/components/table/tableexportdemo.ts b/src/app/showcase/components/table/tableexportdemo.ts index f514e76e64a..3c6f8417f4d 100755 --- a/src/app/showcase/components/table/tableexportdemo.ts +++ b/src/app/showcase/components/table/tableexportdemo.ts @@ -22,7 +22,7 @@ export class TableExportDemo implements OnInit { this.productService.getProductsSmall().then(data => this.products = data); this.cols = [ - { field: 'code', header: 'Code' }, + { field: 'code', header: 'Code', customHeader: 'Product Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } From e542145750075341a26028b24a4a9dbec01f11d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 7 Feb 2022 11:48:39 +0300 Subject: [PATCH 2/6] refactor --- src/app/showcase/components/table/tableexportdemo.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/showcase/components/table/tableexportdemo.ts b/src/app/showcase/components/table/tableexportdemo.ts index 3c6f8417f4d..4dec2a557ba 100755 --- a/src/app/showcase/components/table/tableexportdemo.ts +++ b/src/app/showcase/components/table/tableexportdemo.ts @@ -22,7 +22,7 @@ export class TableExportDemo implements OnInit { this.productService.getProductsSmall().then(data => this.products = data); this.cols = [ - { field: 'code', header: 'Code', customHeader: 'Product Code' }, + { field: 'code', header: 'Code', exportHeader: 'Product Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } From 56e4e13a4a07983d5e62432c235322b7250333e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 7 Feb 2022 11:51:18 +0300 Subject: [PATCH 3/6] refactor --- src/app/showcase/components/table/tableexportdemo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/showcase/components/table/tableexportdemo.html b/src/app/showcase/components/table/tableexportdemo.html index b9eb3c5446c..9afadcffd4e 100755 --- a/src/app/showcase/components/table/tableexportdemo.html +++ b/src/app/showcase/components/table/tableexportdemo.html @@ -97,7 +97,7 @@

Table Export

this.productService.getProductsSmall().then(data => this.products = data); this.cols = [ - { field: 'code', header: 'Code', customHeader: 'Product Code' }, + { field: 'code', header: 'Code', exportHeader: 'Product Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } From db437ef09dd8a45bc32b8c4a9bb550b45c45e61b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 7 Feb 2022 13:16:55 +0300 Subject: [PATCH 4/6] refactor --- src/app/components/table/table.ts | 12 +++++++++++- .../showcase/components/table/tableexportdemo.html | 6 +++--- src/app/showcase/components/table/tableexportdemo.ts | 2 +- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 057dcddd092..c20284545cf 100755 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -499,6 +499,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable responsiveStyleElement: any; + _exportHeader:string; + constructor(public el: ElementRef, public zone: NgZone, public tableService: TableService, public cd: ChangeDetectorRef, public filterService: FilterService, public overlayService: OverlayService) {} ngOnInit() { @@ -813,6 +815,14 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable return data ? ((this.paginator && !this.lazy) ? (data.slice(this.first, this.first + this.rows)) : data) : []; } + @Input() get exportHeader(): string | null { + return this._exportHeader; + } + + set exportHeader(val: string | null) { + this._exportHeader = val; + } + updateSelectionKeys() { if (this.dataKey && this._selection) { this.selectionKeys = {}; @@ -1696,7 +1706,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable for (let i = 0; i < columns.length; i++) { let column = columns[i]; if (column.exportable !== false && column.field) { - csv += '"' + (column.exportHeader || column.header || column.field) + '"'; + csv += '"' + (column[this.exportHeader] || column.header || column.field) + '"'; if (i < (columns.length - 1)) { csv += this.csvSeparator; diff --git a/src/app/showcase/components/table/tableexportdemo.html b/src/app/showcase/components/table/tableexportdemo.html index 9afadcffd4e..67b14742791 100755 --- a/src/app/showcase/components/table/tableexportdemo.html +++ b/src/app/showcase/components/table/tableexportdemo.html @@ -8,7 +8,7 @@

Table Export

- +
@@ -46,7 +46,7 @@

Table Export

-<p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" responsiveLayout="scroll"> +<p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" responsiveLayout="scroll" [exportHeader]="'customExportHeader'"> <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> @@ -97,7 +97,7 @@

Table Export

this.productService.getProductsSmall().then(data => this.products = data); this.cols = [ - { field: 'code', header: 'Code', exportHeader: 'Product Code' }, + { field: 'code', header: 'Code', customExportHeader: 'Product Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } diff --git a/src/app/showcase/components/table/tableexportdemo.ts b/src/app/showcase/components/table/tableexportdemo.ts index 4dec2a557ba..94e9b231211 100755 --- a/src/app/showcase/components/table/tableexportdemo.ts +++ b/src/app/showcase/components/table/tableexportdemo.ts @@ -22,7 +22,7 @@ export class TableExportDemo implements OnInit { this.productService.getProductsSmall().then(data => this.products = data); this.cols = [ - { field: 'code', header: 'Code', exportHeader: 'Product Code' }, + { field: 'code', header: 'Code', customExportHeader: 'Product Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } From 00fe0b421829bd6dbf76bc6082978069b3c4f15f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 7 Feb 2022 15:26:56 +0300 Subject: [PATCH 5/6] update table & table-showcase --- src/app/components/table/table.ts | 18 ++++++--------- .../showcase/components/table/tabledemo.html | 23 +++++++++++++++++-- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index c20284545cf..aaa6dcfbb59 100755 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -283,6 +283,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable @Input() exportFunction; + @Input() exportHeader: string; + @Input() stateKey: string; @Input() stateStorage: string = 'session'; @@ -499,8 +501,6 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable responsiveStyleElement: any; - _exportHeader:string; - constructor(public el: ElementRef, public zone: NgZone, public tableService: TableService, public cd: ChangeDetectorRef, public filterService: FilterService, public overlayService: OverlayService) {} ngOnInit() { @@ -815,14 +815,6 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable return data ? ((this.paginator && !this.lazy) ? (data.slice(this.first, this.first + this.rows)) : data) : []; } - @Input() get exportHeader(): string | null { - return this._exportHeader; - } - - set exportHeader(val: string | null) { - this._exportHeader = val; - } - updateSelectionKeys() { if (this.dataKey && this._selection) { this.selectionKeys = {}; @@ -1686,6 +1678,10 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable this.clear(); } + getExportHeader(column) { + return column[this.exportHeader] || column.header || column.field; + } + public exportCSV(options?: any) { let data; let csv = ''; @@ -1706,7 +1702,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable for (let i = 0; i < columns.length; i++) { let column = columns[i]; if (column.exportable !== false && column.field) { - csv += '"' + (column[this.exportHeader] || column.header || column.field) + '"'; + csv += '"' + this.getExportHeader(column) + '"'; if (i < (columns.length - 1)) { csv += this.csvSeparator; diff --git a/src/app/showcase/components/table/tabledemo.html b/src/app/showcase/components/table/tabledemo.html index d8faad4621e..3856bcf30a6 100755 --- a/src/app/showcase/components/table/tabledemo.html +++ b/src/app/showcase/components/table/tabledemo.html @@ -2212,8 +2212,27 @@
Data Export
} }
- - +
Data Export Properties
+
+ + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
exportHeaderstringnullCustom export header of the column to be exported as CSV.
+

See the live example.

Scrolling
From a8a568ab94349d495d5035a890333b960667d5f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 9 Feb 2022 11:19:09 +0300 Subject: [PATCH 6/6] refactor --- .../showcase/components/table/tabledemo.html | 27 +++++-------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/src/app/showcase/components/table/tabledemo.html b/src/app/showcase/components/table/tabledemo.html index 1ba7fa6dc7d..db1d19ba430 100755 --- a/src/app/showcase/components/table/tabledemo.html +++ b/src/app/showcase/components/table/tabledemo.html @@ -2212,27 +2212,6 @@
Data Export
} } -
Data Export Properties
-
- - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
exportHeaderstringnullCustom export header of the column to be exported as CSV.
-

See the live example.

Scrolling
@@ -3381,6 +3360,12 @@
Properties
null Configures how much buffer space to render back up to when it detects that more buffer is required. + + exportHeader + string + null + Custom export header of the column to be exported as CSV. +