How to export Angular Material table (mat-table) with pagination?

Question

I use Angular Material table (mat-table) and the paginator (mat-paginator) to render large tables. I would like to export the full table (all pages) as CSV. I can export the current page as a CSV, but not all the pages at once.

I can't just export the data from the datasource because the template uses pipes and other formatting and I need the export to have that same formatting.

One option would be when the user hits export it would disable paging, run the export code, and then re-enable paging with the current page set correctly. But the user would see the screen changing and it can take a bit of time for the browser to fully render the entire massive table on the screen. Is there a more efficient way to do this in Angular where I could regenerate that table component in memory or offscreen so the user didn't notice the table changing and such?

Answer 1

mat-table-exporter can be a solution for exporting the material table just as it looks. It exports in excel, csv, json and txt formats.

It exports all the table and the way the data renders in the screen. However exporting huge tables should be considered to be done in backend.