Fixed #2141 - Custom Table CSV Export Headers

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",

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.
      */

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

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')) + '"';
                 }
             }
 

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>

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>