Export to file

Use q-grid export plugin to build data files of required format on client side.

Installation

Install FileSaver.js package.

npm install file-saver

Add angular component inside of q-grid component, after export action should appear, format type is required property. Add file saver library to the q-grid plugin model.

import * as fileSaver from 'file-saver';

@Component({
   selector: 'my-component',
   template: `
      <q-grid [rows]="rows$ | async" [model]="gridModel">
         <q-grid-columns generation="deep"> </q-grid-columns>

         <q-grid-export type="json"> </q-grid-export>
      </q-grid>
   `
})
export class MyComponent implements AfterViewInit {
   rows$ = this.dataService.getRows();
   gridModel = this.grid.model();

   constructor(
      private dataService: MyDataService,
      private qgrid: Grid
   ) {
   }

   ngAfterViewInit() {
      this.gridModel.plugin({
         imports: { fileSaver }
      });
   }
}
How to add excel support?

Install SheetJS package.

npm install xlsx

Add angular component inside of q-grid component. Add xlsx library to the q-grid plugin model.

import * as fileSaver from 'file-saver';
import * as xlsx from 'xlsx';

@Component({
   selector: 'my-component',
   template: `
      <q-grid [rows]="rows$ | async" [model]="gridModel">
         <q-grid-columns generation="deep"> </q-grid-columns>

         <q-grid-export type="xlsx"> </q-grid-export>
      </q-grid>
   `
})
export class MyComponent implements AfterViewInit {
   rows$ = this.dataService.getRows();
   gridModel = this.qgrid.model();

   constructor(
      private dataService: MyDataService,
      private qgrid: Grid
   ) {
   }

   ngAfterViewInit() {
      this.gridModel.plugin({
         imports: { fileSaver, xlsx }
      });
   }
}
How to support custom template for export action?

Use ng-template to override default export action template.

<q-grid-export type="csv">
   <ng-template for="trigger" let-$action>
      <button mat-button (click)="$action.execute()">
         Custom export to CSV
      </button>
   </ng-template>
</q-grid-export>
What format types are supported?

Out of box supported next formats.

Suggested Links