mat-table-exporter
TypeScript icon, indicating that this package has built-in type declarations

15.0.0 • Public • Published

Angular Material Table Exporter

Node version Total Downloads

This package is to make MatTable components exportable in excel, csv, txt and json formats. Pagination is also supported. Applying MatTableExporter directive to your MatTable is enough to make it exportable. The directive uses different exporter services for different exporting types. You can also implement your own exporter and use it for your custom exporting requirements.

This project employs xlsx sheetjs, which is a great library and mature enough for the excel creation itself. In order to achieve a cross-browser file saving capability FileSaverjs is employed.

The MatTableExporter directive inside this package is a cdk-table-exporter subtype and provides support for angular material's cdkTable. cdk-table-exporter facilitates the common exporting related functionalities for CdkTable implementations abstracting the behavior that can change among different CdkTables.

 

Getting Started

If you are employing angular material in your project. Install mat-table-exporter

npm install mat-table-exporter

NOTE: Angular versions older than Angular 8 should install mat-table-exporter@1.2.5

npm install mat-table-exporter@1.2.5

For Angular versions between 8-13 (inclusive), please install mat-table-exporter@10.2.4

npm install mat-table-exporter@10.2.4

After installing mat-table-exporter import MatTableExporterModule in your ngModule

import { MatTableExporterModule } from 'mat-table-exporter';
@NgModule({
  imports: [
    ...
    MatTableExporterModule
  ],
 ]})

 

Usage

matTableExporter is the directive selector.

<mat-table matTableExporter [dataSource]="dataSource" #exporter="matTableExporter">
<button mat-button (click)="exporter.exportTable('csv')"></button>

 

* Stackblitz demo: mte-demo.
* Stackblitz demo of custom exporter mte-cex-demo.

 

API

MatTableExporterDirective

Input/Output Property Type Description
@Input hiddenColumns Array<number> (Optional) The indexes of the columns that are not wanted in the output file
@Input exporter Exporter<Options> (Optional) The actual exporting implementation that defines the strategy to be applied to the rows extracted from MatTable.
@Output exportStarted EventEmitter<void> (Optional) Event that's fired when the export started
@Output exportCompleted EventEmitter<void> (Optional) Event that's fired when the export completed

 

Method Description
exportTable(exportType?: ExportType, options?: Options) Called to trigger the export of MatTable
toggleRow(index: number) Called to mark the row for selection export, if the requirement is to export only selected rows. Having no rows selected means export everything
resetToggleRow() Resets all the rows toggled for exporting

 

ExportType

export enum ExportType {
  XLS = 'xls',
  XLSX = 'xlsx',
  CSV = 'csv',
  TXT = 'txt',
  JSON = 'json',
  OTHER = 'other'
}

 

Options

Property Type Description
fileName string (Optional) Name of the exported file

 

TxtOptions

Extends the common Options interface.

Property Type Description
delimiter string (Optional) Field separator @default ,

 

ExcelOptions

ExcelOptions wraps the WritingOptions of sheetjs library. All other export types share the common Options interface. In the next releases, options will be enriched for the other export types.

Property Type Description
fileName string (Optional) Name of the exported file
type 'base64', 'binary', 'buffer', 'file', 'array', 'string' (Optional) Output data encoding
bookSST boolean (Optional) Generate Shared String Table @default false
sheet string (Optional) Name of the exported sheet
compression boolean (Optional) Use ZIP compression for ZIP-based formats @default false
ignoreEC boolean (Optional) Suppress "number stored as text" errors in generated files @default true
Props Properties (Optional) Workbook properties like Author, Title, Subject etc.
columnWidths Array<number> (Optional) Column widths in maximum char

 

Bundle Size

Xlsx (sheetjs) is a core dependency of the package. Since it is built as a CommonJs module, proper tree-shaking is not available during the builds. That's why mat-table-exporter loads Xlsx dependencies dynamically since v10.2.3.

Even if Xlsx is loaded dynamically, it is heavy by nature. If you'd like to benefit the extra minified version of xlsx (xlsx.mini.min; Doesn't support some features like .xls exporting) you can configure the module as shown below:

@NgModule({
  imports: [
    ...
    MatTableExporterModule.forRoot({xlsxLightWeight: true}),
  ],
 ]})

Contributing

This project is a library project inside ng-material-extensions angular workspace. If you are interested in the source code of this particular library you can get ready and build the project by applying the steps below:

  1. Do npm install in ng-material-extensions directory
  2. Do npm install in ng-material-extensions\projects\cdk-table-exporter directory
  3. Do npm install in ng-material-extensions\projects\mat-table-exporter directory
  4. Go to ng-material-extensions directory
  5. Build both of the exporter packages:
ng build cdk-table-exporter
ng build mat-table-exporter
  1. You can run the showcase application and see your changes in action. In ng-material-extensions run ng s -o  

Support & Donations

Feel free to show your support. Donating supporters will be added into Supporters section inside the README.md of the repository.

GitHub Org's stars -> Become a star-gazer, giving a star at Github

Crypto Donation -> Donate in crypto currencies

 

Licence

Apache-2.0

Install

npm i mat-table-exporter

DownloadsWeekly Downloads

18,827

Version

15.0.0

License

Apache-2.0

Unpacked Size

53.2 kB

Total Files

14

Last publish

Collaborators

  • talhature