How to change export csv name in primeng while click on download?

Question

Let consider below is prime ng table of angular:

I have used primeng table library to list the records and download csv.

<p-table #dt styleClass="table table-striped" [columns]="colsCSV" [value]="reviewSSRList" selectionMode="single"  [paginator]="true" [rows]="10">
      <ng-template pTemplate="caption">
        <div class="ui-helper-clearfix" style="text-align: left">
            <button type="button"  pButton icon="pi pi-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="float:right;"></button>
        </div>
    </ng-template>  
      <ng-template pTemplate="header" let-columns>
            <!-- <tr>  
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}} 
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr> -->
            <tr>
              <th style="text-align: center;" > Check & Delete
                  <!-- <p-sortIcon [field]="'towerId'"></p-sortIcon> -->
              </th>
              <th [pSortableColumn]="'towerId'">Tower ID
                  <p-sortIcon [field]="'towerId'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'towerName'">Tower Name
                  <p-sortIcon [field]="'towerName'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'exAxisTower'">Ex Axis Tower
                <p-sortIcon [field]="'exAxisTower'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'projectStatus'">Project Status
              <p-sortIcon [field]="'projectStatus'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'towerStatus'">Tower Status
             <p-sortIcon [field]="'towerStatus'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'towerType'">Tower Type
              <p-sortIcon [field]="'towerType'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'towerKind'">Tower Kind
              <p-sortIcon [field]="'towerKind'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'ownerShip'">Tower ownerShip Type
              <p-sortIcon [field]="'ownerShip'"></p-sortIcon>
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td  style="text-align: center;"><input type="checkbox" value="{{rowData.towerId}}" (change)="checkboxValSaveDraft($event)"></td>
                <td><a [routerLink]='"/saveDraftDetail/"+rowData.towerId'>{{rowData.towerId}}</a></td>
                <td>{{rowData.towerName}}</td>
                <td style="text-align: center;"><i class="fa fa-check remarkpositive" aria-hidden="true" *ngIf='rowData.exAxisTower'></i>
                  <i class="fa fa-window-close remarknegative" aria-hidden="true" *ngIf='!rowData.exAxisTower'></i>
                  </td>
                <td>{{rowData.projectStatus}}</td>
                <td>{{rowData.towerStatus}}</td>
                <td>{{rowData.towerType}}</td>
                <td>{{rowData.towerKind}}</td>
                <td> {{ rowData.ownerShip }}</td>
              </tr>
        </ng-template>
    </p-table>

When, we are click on export button . it is downloading the csv as "download" name. How we can change to something else?

Monoplegia

Answer 1

exportFilename value is input property of p-table which is hard coded to download.

To change it bind this property with you variable.

<p-table [exportFilename]="variable_to_bind" ...

Working Demo.

Bumbailiff

@PramodKharade PS. I gone through the code too. You beat me too it though. :) – Bumbailiff

Thanks, we both are one same page. if possible then promote the question so it will help others by upvote – Monoplegia

Answer 2

After playing with Primeng Document I found solution to change the default name into anything:

1. We can assigned or declared any name ex:dynamicdownloadName or value to variable or property in .ts/component file.

2. interpolate the name in template file :

3. Add attribute to p-table tag as exportFilename={{dynamicdownloadName}}

 <div class="row">
    <p-table #dt styleClass="table table-striped" exportFilename={{dynamicdownloadName}} [columns]="colsCSV" [value]="reviewSSRList" electionMode="single" [paginator]="true" [rows]="10">
       <!-- Assuming rest of all code is here -->
    </p-table>
</div>
``

Monoplegia