Export CSV is not working in p-table

UI Components for Angular
Post Reply
alidayvn
Posts: 1
Joined: 30 Aug 2019, 09:41

30 Aug 2019, 09:45

I am using p-table's export functionality.

My Html have :
<p-dialog #exportDialog [(visible)]="display" [modal]="true" [responsive]="true" [style]="{width: '440px', minWidth: '200px'}" [minY]="70"
[maximizable]="true" [baseZIndex]="10000" class="export-dialog">
<div class="set-checkbox-position"><label class="label-width p-col-1">Pdf</label><p-checkbox name="groupname" value="pdf" class="p-col-1" [(ngModel)]="selectedExportFormat"></p-checkbox></div>
<div class="set-checkbox-position"><label class="label-width p-col-1">Excel</label><p-checkbox name="groupname" value="excel" class="p-col-1" [(ngModel)]="selectedExportFormat"></p-checkbox></div>
<div class="set-checkbox-position"><label class="label-width p-col-1">All</label><p-checkbox name="groupname" value="all" class="p-col-1" [(ngModel)]="selectedExportFormat"></p-checkbox></div>
<p-footer>
<button type="button" pButton (click)="display=false" label="CANCEL" class="ui-button-secondary set-text-color"></button>
<button type="button" pButton (click)="display=false" (click)="dt.exportCSV({selectionOnly:true})" label="EXPORT" class="set-btn-color"></button>
</p-footer>
</p-dialog>

However, adding this "{selectionOnly:true}" is giving me error as follows :
ERROR TypeError: data.forEach is not a function
at Table.push../node_modules/primeng/components/table/table.js.Table.exportCSV (table.js:1052)
at Object.eval [as handleEvent] (LsfrManagementComponent.html:50)
at handleEvent (core.js:23008)
at callWithDebugContext (core.js:24078)
at Object.debugHandleEvent [as handleEvent] (core.js:23805)
at dispatchEvent (core.js:20457)
at core.js:20904
at HTMLButtonElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17279)
I am aware that for exporting selected data, rows should be dynamic and hence I have dynamic rows and column as follows:

<p-table #dt [columns]="cols" [value]="lsfrMngmnt" [paginator]="false" selectionMode="single" [(selection)]="selectedLsfr" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" class="set-css">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
<th style="width: 2.25em"></th>
</tr>
<tr>
<th *ngFor="let col of columns" [ngSwitch]="col.field" class="align-filter">
<span *ngSwitchCase="'lsfr_id'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'lsfr_date'" class="ui-inputgroup">
<p-calendar #calender id="calender" [(ngModel)]="selectedDate" [locale]="en" placeholder=" / / " dateFormat="dd/mm/yy" (input)="dt.filter($event, col.field, col.filterMatchMode)" (onSelect)="dt.filter($event.target.value, col.field, col.filterMatchMode)" [showIcon]="true"></p-calendar>
</span>
<span *ngSwitchCase="'flight_no'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'origin'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'destination'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'reg'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'station'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'gc'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<p-dropdown *ngSwitchCase="'status'" [options]="statuses" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
</th>
<th style="width: 2.25em"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>

<!-- <td class="align-data">LSFR_{{rowData['lsfr_id']}}</td>
<td class="align-data">{{rowData['lsfr_date']}}</td>
<td class="align-data">{{rowData['flight_no']}}</td>
<td class="align-data">{{rowData['origin']}}</td>
<td class="align-data">{{rowData['destination']}}</td>
<td class="align-data">{{rowData['reg']}}</td>
<td class="align-data">{{rowData['station']}}</td>
<td class="align-data">{{rowData['gc']}}</td>
<td class="align-data">{{rowData['status']}}</td> -->
<td>
<p-tableRadioButton [value]="rowData"></p-tableRadioButton>
</td>
</tr>
</ng-template>
</p-table>

Please suggest what's wrong here.

yigitfindikli
Posts: 335
Joined: 08 Aug 2018, 14:09

03 Sep 2019, 10:20

alidayvn wrote:
30 Aug 2019, 09:45
I am using p-table's export functionality.

My Html have :
<p-dialog #exportDialog [(visible)]="display" [modal]="true" [responsive]="true" [style]="{width: '440px', minWidth: '200px'}" [minY]="70"
[maximizable]="true" [baseZIndex]="10000" class="export-dialog">
<div class="set-checkbox-position"><label class="label-width p-col-1">Pdf</label><p-checkbox name="groupname" value="pdf" class="p-col-1" [(ngModel)]="selectedExportFormat"></p-checkbox></div>
<div class="set-checkbox-position"><label class="label-width p-col-1">Excel</label><p-checkbox name="groupname" value="excel" class="p-col-1" [(ngModel)]="selectedExportFormat"></p-checkbox></div>
<div class="set-checkbox-position"><label class="label-width p-col-1">All</label><p-checkbox name="groupname" value="all" class="p-col-1" [(ngModel)]="selectedExportFormat"></p-checkbox></div>
<p-footer>
<button type="button" pButton (click)="display=false" label="CANCEL" class="ui-button-secondary set-text-color"></button>
<button type="button" pButton (click)="display=false" (click)="dt.exportCSV({selectionOnly:true})" label="EXPORT" class="set-btn-color"></button>
</p-footer>
</p-dialog>

However, adding this "{selectionOnly:true}" is giving me error as follows :
ERROR TypeError: data.forEach is not a function
at Table.push../node_modules/primeng/components/table/table.js.Table.exportCSV (table.js:1052)
at Object.eval [as handleEvent] (LsfrManagementComponent.html:50)
at handleEvent (core.js:23008)
at callWithDebugContext (core.js:24078)
at Object.debugHandleEvent [as handleEvent] (core.js:23805)
at dispatchEvent (core.js:20457)
at core.js:20904
at HTMLButtonElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17279)
I am aware that for exporting selected data, rows should be dynamic and hence I have dynamic rows and column as follows:

<p-table #dt [columns]="cols" [value]="lsfrMngmnt" [paginator]="false" selectionMode="single" [(selection)]="selectedLsfr" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" class="set-css">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
<th style="width: 2.25em"></th>
</tr>
<tr>
<th *ngFor="let col of columns" [ngSwitch]="col.field" class="align-filter">
<span *ngSwitchCase="'lsfr_id'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'lsfr_date'" class="ui-inputgroup">
<p-calendar #calender id="calender" [(ngModel)]="selectedDate" [locale]="en" placeholder=" / / " dateFormat="dd/mm/yy" (input)="dt.filter($event, col.field, col.filterMatchMode)" (onSelect)="dt.filter($event.target.value, col.field, col.filterMatchMode)" [showIcon]="true"></p-calendar>
</span>
<span *ngSwitchCase="'flight_no'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'origin'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'destination'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'reg'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'station'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<span *ngSwitchCase="'gc'" class="ui-inputgroup filter-box">
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value,'contains')">
<span class="ui-inputgroup-addon"><img src="assets/images/search.svg" height="15" alt=""/></span>
</span>
<p-dropdown *ngSwitchCase="'status'" [options]="statuses" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
</th>
<th style="width: 2.25em"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>

<!-- <td class="align-data">LSFR_{{rowData['lsfr_id']}}</td>
<td class="align-data">{{rowData['lsfr_date']}}</td>
<td class="align-data">{{rowData['flight_no']}}</td>
<td class="align-data">{{rowData['origin']}}</td>
<td class="align-data">{{rowData['destination']}}</td>
<td class="align-data">{{rowData['reg']}}</td>
<td class="align-data">{{rowData['station']}}</td>
<td class="align-data">{{rowData['gc']}}</td>
<td class="align-data">{{rowData['status']}}</td> -->
<td>
<p-tableRadioButton [value]="rowData"></p-tableRadioButton>
</td>
</tr>
</ng-template>
</p-table>

Please suggest what's wrong here.
Hi,
Can you provide stackblitz sample using with https://stackblitz.com/github/primeface ... e-template .

Zachary9
Posts: 1
Joined: 24 Aug 2019, 08:10

06 Sep 2019, 06:37

The data can be viewed in table format in online mode at any time. PrimeNG DataTable can be exported in CSV format using the exportCSV() API method Telldunkin.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests