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
+
+
+
+
+ Name |
+ Type |
+ Default |
+ Description |
+
+
+
+
+ exportHeader |
+ string |
+ null |
+ Custom 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
-
-
-
-
- Name |
- Type |
- Default |
- Description |
-
-
-
-
- exportHeader |
- string |
- null |
- Custom 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. |
+