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.

in getRmanReconSosrcToBkingsRep function are you setting the length of the response to totalElements? — Sreemat, Feb 15 '19 at 06:27
As per the documentation you need to pass the columns dynamic. https://www.primefaces.org/primeng/#/table/export.Refer this link.Create an array of object for the columns and pass it [columns] property — Sreemat, Feb 15 '19 at 06:43
I tried with dynamic columns as you suggisted , getting same error, please find edited post. — Soumya Gangamwar, Feb 15 '19 at 08:09
I had the same error. What fixed it for me was adding the `[columns]="cols"` into the element — Ghadir, Aug 26 '21 at 13:32

score 4 · Answer 1 · edited Feb 25 '21 at 16:21

4

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

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

edited Feb 25 '21 at 16:21

zahra zamani

1,323
10
27

answered Feb 24 '21 at 08:52

Sanjeev Bomma

51
1

score 2 · Answer 2 · answered Feb 24 '19 at 19:12

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.

score 1 · Answer 3 · answered Dec 23 '21 at 01:42

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.

score -3 · Answer 4 · answered Aug 16 '21 at 12:17

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

primeng p-table exportCSV() function not working?

4 Answers4

Linked