Merge pull request #11135 from cetincakiroglu/table-update

Fixed #11120 - Table | Custom Table CSV Export Headers
primefaces · Feb 9, 2022 · 6e61f52 · 6e61f52
2 parents 091fc7a + a8a568a
commit 6e61f52
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git 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';
@@ -1676,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 = '';
@@ -1696,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.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
@@ -2212,8 +2212,6 @@ <h5>Data Export</h5>
     &#125;
 &#125;
 </app-code>
-
-
             <p>See the <a [routerLink]="['/table/export']">live example.</a></p>
 
             <h5>Scrolling</h5>
@@ -3362,6 +3360,12 @@ <h5>Properties</h5>
                             <td>null</td>
                             <td>Configures how much buffer space to render back up to when it detects that more buffer is required.</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>
                     </tbody>
                 </table>
             </div>

diff --git a/src/app/showcase/components/table/tableexportdemo.html b/src/app/showcase/components/table/tableexportdemo.html
@@ -8,7 +8,7 @@ <h1>Table <span>Export</span></h1>
 
 <div class="content-section implementation">
     <div class="card">
-        <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>
@@ -46,7 +46,7 @@ <h1>Table <span>Export</span></h1>
             </a>
 
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
-&lt;p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" responsiveLayout="scroll"&gt;
+&lt;p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" responsiveLayout="scroll" [exportHeader]="'customExportHeader'"&gt;
     &lt;ng-template pTemplate="caption"&gt;
         &lt;div class="flex"&gt;
             &lt;button type="button" pButton pRipple icon="pi pi-file" (click)="dt.exportCSV()" class="mr-2" pTooltip="CSV" tooltipPosition="bottom"&gt;&lt;/button&gt;
@@ -97,7 +97,7 @@ <h1>Table <span>Export</span></h1>
         this.productService.getProductsSmall().then(data =&gt; this.products = data);
 
         this.cols = [
-            &#123; field: 'code', header: 'Code' &#125;,
+            &#123; field: 'code', header: 'Code', customExportHeader: 'Product Code' &#125;,
             &#123; field: 'name', header: 'Name' &#125;,
             &#123; field: 'category', header: 'Category' &#125;,
             &#123; field: 'quantity', header: 'Quantity' &#125;

diff --git 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', customExportHeader: 'Product Code' },
             { field: 'name', header: 'Name' },
             { field: 'category', header: 'Category' },
             { field: 'quantity', header: 'Quantity' }