halittalha / ng-material-extensions

Extended features for @angular/material components

⭐⭐ https://halittalha.github.io/ng-material-extensions/ ⭐⭐

Mat Table Extensions

This is an angular workspace that currently includes 3 library projects.

Project	Version	Downloads/Month
mat-table-exporter
cdk-table-exporter
mat-table-filter

Support & Donations

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

-> Become a star-gazer, giving a star at Github

-> Donate in crypto currencies

Licence

Apache-2.0

ng-material-extensions's Issues

paginator error

Even I am not using the paginator in my table but still, it's throwing this error. Can you please give urgent support on it

Not Export Some columns like action columns where i have a button edit,add, etc...

Hello, can i have a possibility to export a datatable without a some colomuns like actions colums?
If yes how can i do this please?

Thanks

Prod fails but dev works fine in Angular 8

I am suing Angular 8
ng serve
<button mat-raised-button color="warn"
(click)="exporter.exportTable('xlsx', {fileName:'seekureg', sheet: 'sheetkureg', Props: {Author: 'RGrover'}})" >Excel

Works fine in Dev mode

When I do
ng build --prod --base-href /seekureg/

ERROR in src/app/demo/demo.component.html(6,6): : Argument of type '"xlsx"' is not assignable to parameter of type 'ExportType'

Please help suggest a workaround
I borrowed code from your https://stackblitz.com/edit/mte-demo

Regards
Jayanta @ Kolkata

ng build --prod throwing ERROR in Directive CdkTableExporter mat-table-exporter/node_modules/cdk-table-exporter/cdk-table-exporter.d.ts has no selector, please add it!

After adding the mat-table-exporter and cdk-table-exporter in the ngModules, I am getting an error

mat-table-exporter/node_modules/cdk-table-exporter/cdk-table-exporter.d.ts has no selector, please add it!

column hiding problem in cdk/mat-table-exporter for two digit column indexes

Column hiding through the directive is problematic when hiding the columns that have two digit index numbers.

when i exported my data table as text .it adds 2 korean letters.which when i translated says"can i take u home tonight".i was shicked

mat-table-exporter.txt

Format Excel File Prior To Export

Is there a way to format the excel file prior to export?

Export to excel in native device

Is it possible to use mat-table-exporter using the ionic framework on a native device?

MatTableExporterModule does not work with Angular 8

MatTableExporterModule does not work with Angular 8,
Is there any alternative?

Filtering on boolean value 'false' not working

False is not handled properly in the following two lines:

if (!exampleColumnValue || exampleColumnValue instanceof Array) {

if (itemColumnValue) {

mat-table-extensions with server side data source

Hello,
First of all thank you so much for these libraries you are contributing with, they are of great help for many of us.
I'd like to know if mat-table-extensions is able to work with custom server side data sources.
I have a mat-table and a paginator, to feed mat-table with data I have my own custom DataSource (implementing DataSourceinterface) for fetching data from the server when we interact with paginator. The problem is when I try to export the table mat-table-exporter goes through all the pages of my table but it outputs the data of the first page on every page. Example:

Table page 1 contains rows A, B and C
Table page 2 contains row D and E

After exporting with mat-table-exporter my document has 6 rows: A, B, C, A, B, C.
I've checked a bit in the source and observed even though paginator was changing page the contents of the table did not change accordingly, they stayed the same as if the table was on page 1. Am I missing something here?

I'm using:

• Angular 6.1.9
• Angular material/cdk 7.0.2
• mat-table-exporter 1.2.5

I am getting Cannot read property 'exportTable' of undefined

Is it possible to export multiple tables?

Is it possible to have like a dialog to chose "m" of "n" mat-tables and export those "m" different table data into 1 xlsx with m named sheets? How could we construct something like this?

Ability to add custom compare function to each column

It would be great to add custom filter function for some columns. For example the array type columns could be handled.

Error ng build --prod

Cannot determine the module for class CdkDetailRowDirective in E:/Angular/opr/src/app/main/laporan/laporan-selisih-tonase-per-kontrak/cdk-detail-row.directive.ts! Add CdkDetailRowDirective toutSub the NgModule to fix it

"export 'CHAR_SET_UTF_16' was not found in 'cdk-table-exporter'

I am getting following error:

ERROR in ./node_modules/mat-table-exporter/fesm5/mat-table-exporter.js 2:0-577
"export 'CHAR_SET_UTF_16' was not found in 'cdk-table-exporter'
ERROR in ./node_modules/mat-table-exporter/fesm5/mat-table-exporter.js 2:0-577
"export 'P' was not found in 'cdk-table-exporter'

using

"mat-table-exporter": "1.2.2"
 "@angular/animations": "^8.2.5",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.5",
"@angular/compiler": "^8.2.5",
"@angular/core": "^8.2.5",
"@angular/forms": "^8.2.5",
"@angular/material": "^8.2.3",
"@angular/material-moment-adapter": "^8.2.3",
"@angular/platform-browser": "^8.2.5",
"@angular/platform-browser-dynamic": "^8.2.5",
"@angular/platform-server": "^8.2.5",
"@angular/router": "^8.2.5",

ÿþ characteres appear at the beggining of a text file

When you export a table in txt format (using mat-table-exporter), ÿþ appears. I haven't found anyone having this issue with this dependency, so I'm looking for help on how to solve this issue.

Regards

Cannot find module 'mat-table-exporter'.

import { MatTableExporterModule } from 'mat-table-exporter';
Cannot find module 'mat-table-exporter'. can you please give an answer for this issue
while ng build i got this error
please help me to fix this

excel with more than one exported table

Hi,

Is there a possibility to export several tables at the same time and having them in the same excel sheet?

If so, how?
If not, do you plan on having it in the near future?

I think it would be great to have this feature since people need to export several tables from the same page at the same time pretty often, not just one table.

Many thanks for your reply.

Best,
Rafael

Using custom exporter and other defaults like xlsx is causing issues

I loved this extension. However I have a requirement where I need to export the mat table as xlsx as well as PDF. For pdf I am using the custom export feature of this extension and referred to this link mentioned in the docs -> https://stackblitz.com/edit/mte-cex-demo

I have just added another button like this
<button mat-raised-button (click)="exportDirective.exportTable('other')">Custom Export
<button mat-raised-button (click)="exportDirective.exportTable('xlsx')">Excel Export

On clicking the custom export button, the functionality works fine, however, once I click on the xlsx button and then the custom export button, it starts exporting the xlsx file instead of the custom log statement.

Can you help me resolve this issue?

Error Argument of type '"xlsx"' is not assignable to parameter of type 'ExportType'.

Hi.
In my Angular 8 project, I have buttons to export data from my mat-table.
I have added the button:

<button mat-button class="a-btn a-btn-primary a-btn-lg" matTooltip="Esporta in Excel" aria-label="Esporta in Excel" [matTooltipPosition]="position.value" (click)="exporter.exportTable('xlsx', {fileName:'BandiGare', sheet: 'BandiGare', Props: {Author: 'Admin'}})">

when I try to build:
ng build --prod

I obtain:

Error Argument of type '"xlsx"' is not assignable to parameter of type 'ExportType'.

Why??

My package.json is:
"dependencies": {
"@angular/animations": "^8.2.5",
"@angular/cdk": "^8.1.4",
"@angular/common": "~8.2.4",
"@angular/compiler": "~8.2.4",
"@angular/core": "~8.2.4",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "~8.2.4",
"@angular/material": "^8.1.4",
"@angular/platform-browser": "~8.2.4",
"@angular/platform-browser-dynamic": "~8.2.4",
"@angular/router": "~8.2.4",
"angular-jwt": "^0.1.11",
"angular5-csv": "^0.2.11",
"appkit": "^3.2.0",
"cdk-table-exporter": "^1.2.1",
"hammerjs": "^2.0.8",
"install": "^0.13.0",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^2.2.0",
"mat-table-exporter": "^1.2.1",
"moment": "^2.24.0",
"ngx-avatar": "^3.7.0",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"xlsx": "^0.15.1",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.2",
"@angular/cli": "~8.3.2",
"@angular/compiler-cli": "~8.2.4",
"@angular/language-service": "~8.2.4",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}

Exporting Number Cell not recognised in Excel

When i export to XLS or XLSX, number columns are formatted as text. So i need to convert all cells to number ....
is there an option ?
i see that sheetjs was properly exporting numbers so why not the extension ?

Is there a way to manually call the export function?

Is there a way to manually call the export function on the button, so you can do some stuff before the export starts? Something like this:

<button mat-button (click)="myExportFunction()">EXPORT</button>

myExportFunction() {
    doSomething();
    matTableExporterFunction();
}

Great extension!

exportCompleted triggers before export is actually complete

Any code within exportCompleted() seems to be triggered before the export is actually complete.

https://stackblitz.com/edit/mte-demo-ohmwfn

Expected Behavior based on the linked example:
The birth column should not get exported, and should be added back to the template after the export report has been completed.

Actual Behavior based on the linked example
The birth column is removed but is immediately added back again before the export is generated and downloaded.

You can see this is the case by commenting out the code inside exportCompleted() .

I realize that this particular example is not useful IRL since I could just use the hiddenColumns attribute. What I am really trying to do is use this functionality on a table with expandable rows. I want to remove the expanded content from being exported, then add it back to the template after the export is completed. I tried to make a Stackblitz showing this exactly but I was getting an error.

Also, I don't know if this is an issue with the library or with Windows, but it seems like when I export to CSV, the file name changes but the content is the same. If I export as CSV, then make a change to the code, then export again, the expected change does not show. I have to delete the file from my downlaods folder and export again in order to see the expected result. Im using Windows 10, Chrome 80. I tested a little with the other file formats and they seem to work as expected.

"TypeError: Cannot read property 'componentView' of undefined at MatTableExporterDirective.push

Here is the template:
<mat-table matTableExporter *ngIf="dataLoaded && !showMinTable" [dataSource]="allTableData" #exporter="matTableExporter" matSort>

The table wont load unless I remove the "matTableExporter" and "#exporter="matTableExporter". Otherwise the table is fine.

The data being loaded for the table is in an ngOnInit method and once i have the data I have to conduct some manipulations before it's ready. the "dataLoaded" is not set to true until all of this is complete. I"m also using Angular 9rc3. Here is the package.json:

"dependencies": {
"@angular-devkit/build-angular": "^0.803.19",
"@angular/animations": "^9.0.0-rc.3",
"@angular/cdk": "~8.2.3",
"@angular/common": "^9.0.0-rc.3",
"@angular/compiler": "^9.0.0-rc.3",
"@angular/core": "^9.0.0-rc.3",
"@angular/forms": "^9.0.0-rc.3",
"@angular/http": "^6.0.3",
"@angular/material": "~8.2.3",
"@angular/platform-browser": "^9.0.0-rc.3",
"@angular/platform-browser-dynamic": "^9.0.0-rc.3",
"cdk-table-exporter": "^1.2.2",
"mat-table-exporter": "^1.2.2",
"rxjs": "^6.0.0",
"tslib": "^1.10.0",
"zone.js": "^0.10.2"
},

for which versions this mat table exporter will work? Uncaught TypeError: Object(...) is not a function

I am using angular 6.0.2, I am getting this error

Uncaught TypeError: Object(...) is not a function
at cdk-table-exporter.js:726
at Object../node_modules/cdk-table-exporter/fesm5/cdk-table-exporter.js (cdk-table-exporter.js:728)
at webpack_require (bootstrap:81)
at Object../node_modules/mat-table-exporter/fesm5/mat-table-exporter.js (loglevel.js:250)
at webpack_require (bootstrap:81)
at Object../src/app/app.module.ts (app.component.ts:10)
at webpack_require (bootstrap:81)
at Object../src/main.ts (environment.ts:14)
at webpack_require (bootstrap:81)
at Object.0 (main.ts:14)

Cannot generate file: ERROR TypeError: Cannot read property 'length' of undefined

I have following issue when I want to generate file using Mat Table Exporter

ERROR TypeError: Cannot read property 'length' of undefined
at DataExtractorService.convertRow (cdk-table-exporter.js?c021:971)

function (hiddenColumns, row) { /** @type {?} */ var result = new Array(); /** @type {?} */ var cells = row.children; for (var i = 0; i < cells.length; i++) { if (!this.shouldHide(hiddenColumns, i)) { /** @type {?} */ var element = cells.item(i).innerText; result.push(element); } } return result; };

Object row has following properties:

childNodes: NodeList [] data: "" firstChild: null isConnected: true lastChild: null length: 0 nextElementSibling: div.mat-header-row.header-group-row.ng-star-inserted nextSibling: div.mat-header-row.header-group-row.ng-star-inserted nodeName: "#comment" nodeType: 8 nodeValue: "" ownerDocument: document parentElement: mat-table.mat-table.ng-star-inserted parentNode: mat-table.mat-table.ng-star-inserted previousElementSibling: null previousSibling: comment textContent: "" __proto__: Comment

MatTableExporterModule is not recognized in app.module.ts

MatTableExporterModule in import is not recognized and i have done
npm install --save mat-table-exporter

Support UTF-8 BOM during csv saving

The exported csv is opened by excel as ANSI encoded by default, So the non latin characters is not shown directly. The workaround for this is to set BOM bytes before the content as follow
eligrey/FileSaver.js#28 (comment)

Multiple footer rows export not working

When having more then one footer row in a MatTable, only the first one gets exported.
I wanted to give a try on solving it, but after building mat-table-exporter/cdk-table-exporter using the steps from 'Contribute' section, when trying to use the library in my app, I get the following error:

ERROR in Failed to compile entry-point mat-table-exporter (es2015 as esm2015) due to compilation errors:
../mat-table-ext/node_modules/@angular/material/table/table-module.d.ts:8:22 - error NG6002: Appears in the NgModule.imports of MatTableExporterModule, but could not be resolved to an NgModule class

export declare class MatTableModule {

Any ideas on how to get the library working on my local environment, so I can try fixing the issue?

There is no directive with "exportAs" set to "matTableExporter"

I have followed all of the instructions and added the module to my imports of app.module.ts.

I found this [https://stackoverflow.com/questions/57969084/error-there-is-no-directive-with-exportas-set-to-mattableexporter-when-using] and followed the same instructions there but it is still giving me the error. I have tried different versions also. I am using Angular 8.

I see it working in the stackBlitz demo fine and have copied the configuration of that exactly.

I apologise if I have missed something obvious.

Any ideas, this package is exactly what I need.

Thanks

Chinese Characters inserted into first line of Text exports.

뿃뻃Date Name Phone Type

Apologies if the characters are not Chinese. However its tedious to constantly remove them every export.

Thanks much.

Remove <mat-icon> name from cell if they exist

Hi,
I use mat-icons in some cells, just for showing filtering menus in the header, or when the cell is empty. I would be great if you could remove the name of the icon from the cell.
BTW it's a great job

Receive "Can't bind to 'matTableFilter' since it isn't a known property of 'table'" after upgrading to version 1.2.1

I have just tried upgrading the mat-table-filter package to version 1.2.1 and am receiving the following error: "Can't bind to 'matTableFilter' since it isn't a known property of 'table'".

I am running Angular Materials 8.2.3.

Cheers

Ability to reset selectedRows

Hello There,
I wanted to clear selection after doing toggleRow on a table.
Say, I selected 5 rows from original set of rows and do the export. Then I deselect all the rows and export again, but selection was not reset. It exports the selectedRows.
But this can be easily enabled if you could add resetToggle() functionality setting selectedRows empty on CdkTableExporter project.

 resetToggle(): void {
     this._selectedRows = [];
   }

I tried to contribute for this, but this is a private repo.

Thanks,
Janaka.

Usage with ionic framework - Cannot read property 'exportTable' of undefined

Sample code returns this error:

ERROR TypeError: Cannot read property 'exportTable' of undefined
    at Object.eval [as handleEvent] (NotesPage.html:8)
    at handleEvent (core.js:38098)
    at callWithDebugContext (core.js:39716)
    at Object.debugHandleEvent [as handleEvent] (core.js:39352)
    at dispatchEvent (core.js:25818)
    at core.js:37030
    at HTMLElement.<anonymous> (platform-browser.js:1789)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)

Expandable rows data being exported even with hiddenColumns

Hello, if you have a table with a table inside the expandable row it will get exported along the [0] column.
That means that if in the main table uses [hiddenColumns]='[0]' it will hide both the column 0 and the expandable row containing the mat table.

To make it clear, the structure is:
Mat Table (main)
|-->column 0
|-->column 1
|-->column 2
|-->column 3
|-->expandable column definition
-----|-->Mat-table (inside the expandable row)
----------|-->column 0
----------|-->column 1

Support column hiding with row property names

Thanks. Worked.
New Question: Is there any way to use columnName instead of columnNumber? I have a lote of tables and I`m afraid, in the future, someone (even me) add/remove a new column and forget to adjust this

Regards,

Originally posted by @felipebossolani in #10 (comment)

Cannot read property 'exportTable' of undefined - Angular 7

Sample code gives me this error:

ERROR TypeError: Cannot read property 'exportTable' of undefined
at Object.eval [as handleEvent] (AppsComponent.html:114)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)
at core.js:21003
at HTMLButtonElement. (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)

Here is my import into app.module.ts

`import {MatTableExporterModule} from 'mat-table-exporter';

@NgModule({
declarations: [
],
imports: [
MatTableExporterModule
],
providers: [ApplicationService],
bootstrap: [AppComponent]
})
export class AppModule {}`

Here is my mat-table and mat-button from my table.html file
`<mat-table
matTableExporter
class="mat-elevation-z4"
[dataSource]="dataSource"
*ngIf="dataSource.data.length > 0"
#exporter="matTableExporter">
.............
</mat-table

<button mat-button (click)="exporter.exportTable('csv')">Export
`

Export selected row from the table

Hello,
I think it would be great if you could only export specific or selected rows from the table.

HiddenColumns property problem

Hey,

I have a small problem with extension.

When, I set for instance hiddenColumns="13" it will actually hide columns with index 1 and 3, not 13.

Last page data is missing in the export for large datasets

While exporting to excel , the table data of the last page ( pagination ) is not exported.
This is happening , if the data rows are larger . Found for the data > 4000 items

Upgrading to any version newer than 1.0.2: TypeError: Cannot read property 'hasOwnProperty' of undefined

Updating mat-table-exporter from 1.0.2 to any later versions requires an npm uninstall for cdk-table-exporter because it was mistakenly set as peer dependency at that particular version.

So the steps to follow in such a case would be something like:
npm uninstall cdk-table-exporter
npm uninstall mat-table-exporter
npm install mat-table-exporter

WARNING in ./src/app/flight-history/flight-history.component.ngfactory.js 638:2391-2415
"export 'DataExtractorService' (imported as 'i47') was not found in 'cdk-table-exporter'

WARNING in ./src/app/flight-history/flight-history.component.ngfactory.js 638:2364-2389
"export 'ServiceLocatorService' (imported as 'i47') was not found in 'cdk-table-exporter'


RUNTIME

main.41b942575048f295d92b.js:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'hasOwnProperty' of undefined
TypeError: Cannot read property 'hasOwnProperty' of undefined
    at mm (main.41b942575048f295d92b.js:1)
    at XO (main.41b942575048f295d92b.js:1)
    at t.get (main.41b942575048f295d92b.js:1)
    at zD (main.41b942575048f295d92b.js:1)
    at FD (main.41b942575048f295d92b.js:1)
    at PD (main.41b942575048f295d92b.js:1)
    at fI (main.41b942575048f295d92b.js:1)
    at SI (main.41b942575048f295d92b.js:1)
    at xI (main.41b942575048f295d92b.js:1)
    at fI (main.41b942575048f295d92b.js:1)
    at P (polyfills.82fdbae629c46e203248.js:1)
    at P (polyfills.82fdbae629c46e203248.js:1)
    at polyfills.82fdbae629c46e203248.js:1
    at t.invokeTask (polyfills.82fdbae629c46e203248.js:1)
    at Object.onInvokeTask (main.41b942575048f295d92b.js:1)
   at t.invokeTask (polyfills.82fdbae629c46e203248.js:1)
    at e.runTask (polyfills.82fdbae629c46e203248.js:1)
    at g (polyfills.82fdbae629c46e203248.js:1)
    at e.invokeTask [as invoke] (polyfills.82fdbae629c46e203248.js:1)
    at m (polyfills.82fdbae629c46e203248.js:1)

Feature request: allow setting column format/type for Excel export

We export table data where one of the column is a date.
It would it were possible to let the exporter know that it should set the column format appropriately and not treat it as just text.

got error in prod build

i got error while build in prod
ERROR in Directive CdkTableExporter in C:/Users/...../node_modules/cdk-table-exporter/cdk-table-exporter.d.ts has no selector, please add it! Can't resolve all parameters for CdkTableExporter in C:/Users/...../node_modules/cdk-table-exporter/cdk-table-exporter.d.ts: ([object Object], [object Object], [object Object], ?). Cannot determine the module for class CdkTableExporter in C:/Users/..../node_modules/cdk-table-exporter/cdk-table-exporter.d.ts! Add CdkTableExporter to the NgModule to fix it.
how to fix it.

thank you

Exclude specific columns

Hi,

Is there any way to exclude specific columns from export. I have currently a checkbox column and it is exported and I need to exclude it from exporting?

Thanks

Add UTF-8 BOM to CSV output

By default, the table exporter seems to output UTF-8 CSV data, but without a BOM (see: https://csv.thephpleague.com/8.0/bom/)

When opening the CSV file in Excel (yes, I realize there is an Excel export option, but unfortunately that is how many users consume CSV files), special characters will end up garbled by default. You can observe this behavior with your own example (row 10, Wilhelm Röntgen).

As a workaround, is it possible to intercept the output of the exporter, and patch the Blob (put a BOM in front of it), before sending it to the browser as download?

ERROR in node_modules/mat-table-exporter/lib/mat-table-exporter.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

Hi, I'm working with

Angular 9.1.3

I got this error immediately after installing the mat-table-exporter:
(I used npm install --save mat-table-exporter)
" ERROR in node_modules/mat-table-exporter/lib/mat-table-exporter.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class."

It also said: " This likely means that the library (mat-table-exporter) which declares MatTableExporterModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy."

Can't set fileName

It gives an error when try to set a fileName.

		<button (click)="exporter.exportTable('xlsx','custom_file_name')" mat-raised-button matTooltip="Dışa Aktar" type="button">
				 Dışa Aktar <mat-icon>file_download</mat-icon> 
			</button>
		</ng-container>

Here is error: Cannot create property 'type' on string 'custom_file_name'

Is there any way to choose which colunms will be exported?

Is there any way?