From ddfbd6c095589b9951c6e204df29d96d52f830c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 11 Feb 2022 12:13:45 +0300
Subject: [PATCH] Fixed #2141 - Custom Table CSV Export Headers

---
 api-generator/components/column.js          | 6 ++++++
 src/components/column/Column.d.ts           | 4 ++++
 src/components/column/Column.vue            | 4 ++++
 src/components/datatable/DataTable.vue      | 2 +-
 src/views/datatable/DataTableDoc.vue        | 6 ++++++
 src/views/datatable/DataTableExportDemo.vue | 8 ++++----
 6 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/column.js b/api-generator/components/column.js
index 8df610148..9f538a3fe 100644
--- a/api-generator/components/column.js
+++ b/api-generator/components/column.js
@@ -233,6 +233,12 @@ const ColumnProps = [
         default: "true",
         description: "Whether the column is included in data export."
     },
+    {
+        name: "exportHeader",
+        type: "string",
+        default: "null",
+        description: "Custom export header of the column to be exported as CSV."
+    },
     {
         name: "hidden",
         type: "boolean",
diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts
index 4b75ebfc8..4b99d80d1 100755
--- a/src/components/column/Column.d.ts
+++ b/src/components/column/Column.d.ts
@@ -229,6 +229,10 @@ export interface ColumnProps {
      * Whether the column is included in data export.
      */
     exportable?: boolean | undefined;
+    /**
+     * Custom export header of the column to be exported as CSV.
+     */
+    exportHeader?: string | undefined;
     /**
      * Defines the filtering algorithm to use when searching the options.
      */
diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue
index b557e8522..752f2b305 100755
--- a/src/components/column/Column.vue
+++ b/src/components/column/Column.vue
@@ -162,6 +162,10 @@ export default {
             type: Boolean,
             default: true
         },
+        exportHeader: {
+            type: String,
+            default: null
+        },
         filterMatchMode: {
             type: String,
             default: null
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index ab153f8e6..262eff038 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -1033,7 +1033,7 @@ export default {
                     else
                         headerInitiated = true;
 
-                    csv += '"' + (this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
+                    csv += '"' + (this.columnProp(column, 'exportHeader') || this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
                 }
             }
 
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 1b3340078..6e36b8994 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -373,6 +373,12 @@ export default {
                             <td>true</td>
                             <td>Whether the column is included in data export.</td>
                         </tr>
+                        <tr>
+                            <td>exportHeader</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Custom export header of the column to be exported as CSV.</td>
+                        </tr>
                         <tr>
                             <td>filterMatchMode</td>
                             <td>string</td>
diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue
index 8c178983b..95597a4a8 100755
--- a/src/views/datatable/DataTableExportDemo.vue
+++ b/src/views/datatable/DataTableExportDemo.vue
@@ -16,7 +16,7 @@
                             <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                         </div>
                     </template>
-                    <Column field="code" header="Code"></Column>
+                    <Column field="code" header="Code" exportHeader="Product Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
                     <Column field="quantity" header="Quantity"></Column>
@@ -47,7 +47,7 @@ export default {
                     <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                 </div>
             </template>
-            <Column field="code" header="Code"></Column>
+            <Column field="code" header="Code" exportHeader="Product Code"></Column>
             <Column field="name" header="Name"></Column>
             <Column field="category" header="Category"></Column>
             <Column field="quantity" header="Quantity"></Column>
@@ -91,7 +91,7 @@ export default {
                     <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                 </div>
             </template>
-            <Column field="code" header="Code"></Column>
+            <Column field="code" header="Code" exportHeader="Product Code"></Column>
             <Column field="name" header="Name"></Column>
             <Column field="category" header="Category"></Column>
             <Column field="quantity" header="Quantity"></Column>
@@ -134,7 +134,7 @@ export default {
                         <p-button icon="pi pi-external-link" label="Export" @click="exportCSV($event)"></p-button>
                     </div>
                 </template>
-                <p-column field="code" header="Code"></p-column>
+                <p-column field="code" header="Code" exportHeader="Product Code"></p-column>
                 <p-column field="name" header="Name"></p-column>
                 <p-column field="category" header="Category"></p-column>
                 <p-column field="quantity" header="Quantity"></p-column>