PrimeNG export to CSV

Question

I have a PrimeNG grid and the data served by the PrimeNG is from a service which have server side paginated data and from the server we would receive only our current page record.

I have my HTML code as below:

 <p-dataTable *ngIf="displayTable" #dataTable [value]="JSONArray"
            [lazy]="true" [responsive]="true" [rows]="10"
            [paginator]="true" selectionMode="single" 
            [(selection)]="selectedEvent" 
            (onRowSelect)="onRowSelect($event)" 
            [pageLinks]="5" [(first)] = "first"
            class="ui-datatable-scrollable-wrapper view-table" 
            [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)">
            <p-header>
                <div class="ui-helper-clearfix">
                    <button type="button" pButton icon="fa-file-o" iconPos="left"
                  label="CSV" (click)="dataTable.exportCSV()" style="float:left">
                    </button>
                </div>
            </p-header>
            <p-column field="col1" header="Column 1"></p-column>
            <p-column field="col2" header="Column 2"></p-column>
            <p-footer>
                <div>
                </div>
            </p-footer>
</p-dataTable>

JSONArray variable will only have 10 records (my page size), but we want to export all the data from the server. Let say I have 5 page, I would like to export all the 50 records.

dataTable.exportCSV() is only exporting my current page 10 record only. Is there any way to export all the 50 records?

Viehmann

Answer 1

There no direct solution, sharing a solution hoping that it might help someone.

My HTML looks like this.

<p-dataTable *ngIf="displayTable" #dataTable [value]="JSONArray"
            [lazy]="true" [responsive]="true" [rows]="rowCount"
            [paginator]="true" selectionMode="single" 
            [(selection)]="selectedEvent" 
            (onRowSelect)="onRowSelect($event)" 
            [pageLinks]="5" [(first)] = "first"
            class="ui-datatable-scrollable-wrapper view-table" 
            [totalRecords]="totalRecords" (onLazyLoad)="loadCarsLazy($event)">
            <p-header>
                <div class="ui-helper-clearfix">
                    <button type="button" pButton icon="fa-file-o" iconPos="left"
                  label="CSV" (click)="exportCSV(dataTable)" style="float:left">
                    </button>
                </div>
            </p-header>
            <p-column field="col1" header="Column 1"></p-column>
            <p-column field="col2" header="Column 2"></p-column>
            <p-footer>
                <div>
                </div>
            </p-footer>
</p-dataTable>

my typescript looks like this.

private _dataTable: any;
private rowCount: Number;
private pageNoSize: any;

exportCSV(dataTable) {
        this.rowCount = 50;
        this.pageNoSize = 'page=0&size=' + this.rowCount;
        this._dataTable = dataTable;
        this.getJSONData();
    }


getJSONData() {
    this.getJSONDataService.get(uri + this.pageNoSize)
        .subscribe(
        data => {

                this._dataTable.value = data;
                this._dataTable.exportCSV();
                this.rowCount = 10;

        },
        error => {
        },
    );
}

Viehmann

Is this solution solves my proble #54704059 – Echelon

Answer 2

Another way would be disabling paginator temporarily:

<p-table #yourTable [columns]="cols" [paginator]="true" rows="10">TABLE CONTENT</p-table>

In the export event of a button:

<button type="button" pButton (click)="yourTable.paginator=false;yourTable.exportCSV();yourTable.paginator=true;" label="Export"></button>

Anthotaxy

Answer 3

You could make one extra call loadAllData() first time on loading your component and store data in JsonArrayAll[] and keep the paginated data in your JsonArray[].

<p-table #dt [columns]="cols" [value]="JsonArray" [paginator]="true" rows="10">TABLE</p-table>
<button (click)="dt.value=JsonArrayAll;dt.exportCSV();dt.value=JsonArray;">

Hijoung

Answer 4

Just change :

[rows]="10" 

to any value you want.

Like :

[rows]="50"

You can also change this dynamically.

Fye

it did not done the trick for me, have to look into the datatable JS to understand what i was missing. Thanks for suggesting, this [row] which guided to solve the problem and my solution is as answer to this thread. – Viehmann