primeng p-table exportCSV() function not working?

Question

I am using new PrimengV7 p-table I want export the table,

So my code is

<p-header>
        <div class="pull-right" *ngIf="collapsed">

            <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
        </div>
    </p-header>
<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
    (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements"
                    [responsive]="true" scrollable="true" scrollHeight="400px">
                    <ng-template pTemplate="header">
                            <tr>
                                    <th style="width: 100px"></th>
                                    <th style="width: 100px">{{columns['so']}}</th>
                                    <th style="width: 100px">{{columns['sourceLineNumber']}}</th>
                                    <th style="width: 100px">{{columns['bookingEntityName']}}</th>
                              </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep>
                            <tr [pSelectableRow]="rowData">
                                    <td style="width: 100px">
                                        <span>  <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
                                        </span>
                                    </td>
                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.so}}">{{rmanReconSosrcToBkingsRep.so}}</td>
                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.sourceLineNumber}}">{{rmanReconSosrcToBkingsRep.sourceLineNumber}}</td>

                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.bookingEntityName}}">{{rmanReconSosrcToBkingsRep.bookingEntityName}}</td>

                             </tr>
                    </ng-template>

Even I tried put the icon inside table , but it's not working in cosole showing error

trial 2: with dynamic columns

<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
        (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements"
                        [responsive]="true" scrollable="true" scrollHeight="400px">
                        <ng-template pTemplate="header">
                                <tr>
                                        <th style="width: 100px"></th>
                                        <th *ngFor="let col of columnOptions">
                                                {{col.label}}
                                        </th>
                                     </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep>
                                <tr [pSelectableRow]="rowData">
                                        <td style="width: 100px">
                                            <span>  <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
                                            </span>
                                        </td>

                                                <td *ngFor="let col of columnOptions">
                                                        {{rowData[col.value]}}
                                                    </td>

                                 </tr>
                        </ng-template>

Even it's not working

please any one help me

Thanks in advance.

Moorer

in getRmanReconSosrcToBkingsRep function are you setting the length of the response to totalElements? – Cinematograph

yes, Is that cause problem? – Moorer

As per the documentation you need to pass the columns dynamic. primefaces.org/primeng/#/table/export.Refer this link.Create an array of object for the columns and pass it [columns] property – Cinematograph

I tried with dynamic columns as you suggisted , getting same error, please find edited post. – Moorer

I had the same error. What fixed it for me was adding the [columns]="cols" into the <p-table> element – Attalanta

Answer 1

Please Add [columns]="cols" to <p-table> and try:

 <p-table #dt [columns]="cols" [value]="cars" selectionMode="multiple"[(selection)]="selectedCars" [exportFilename]="exportName">

Cracksman

Answer 2

if you want to export your data in the table you should use export feature of data table in prime ng. and using this feature is absolutely easy and simple. you should follow 2 steps. first you should add template variable on the p-table tag.as below:

 <p-table #dt [columns]="cols" [value]="cars" selectionMode="multiple" 
     [(selection)]="selectedCars">

in the line above, dt is template variable.

the second step is to make button and just call a function. but be careful that you must not change the name of the function to trigger the export function:

   <button type="button" pButton icon="fa fa-file-o" iconPos="left" label="All Data" (click)="dt.exportCSV()" style="float:left"></button>

the exportCSV() is a function which start the exporting to CSV file. but your code is wrong because you use the function before the p-table on tag that is wrong. the function must be inside p-table tag. not outside of that.

Krick

Answer 3

In your component .ts file you can define part of your column info as such:

   // rest of column def in component html file for type, size, filters, etc..
   columns: any[] = [
        {field: 'selected'},
        {field: 'inventoryNum'},
        {field: 'serialNum'},
        {field: 'status'},
        {field: 'lastModifiedByUser'},
        {field: 'lastModifiedByDate'}
    ];

Then in your html you can add a button to export such as:

    <button type="button" (click)="doDownloadToCsv()" pButton label="CSV" icon="pi pi-arrow-circle-down"></button>

Then in the component set the columns of the table to be that array above in the call back function like:

   doDownloadToCsv() {
            let options = { selectionOnly: true };
            this.table.columns = this.columns;
            this.table.exportCSV(options);
        }

In this function, I set the table.columns to be my column: any[] because it was null from defining them in the html rather than somewhere else. By setting the array, it can get the size and then worked. Note: my solution only takes the selected rows.

Cardoon

Answer 4

<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
[columns]="cols" (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements" [responsive]="true" scrollable="true" scrollHeight="400px"> <th *ngFor="let col of columnOptions"> {{col.label}} <tr [pSelectableRow]="rowData"> <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export">

                                            <td *ngFor="let col of columnOptions">
                                                    {{rowData[col.value]}}
                                                </td>

                             </tr>
                    </ng-template>

Supercolumnar