Material-table: Large bundle size (jspdf)

[johnmagbag1995]

Jspdf has 290kb of bundle size even though I am not using it. Is it possible to remove it from bundle?

table options:
pageSize: 10,
actionsColumnIndex: -1,
sorting: true,
draggable: false,
search: false,
showTitle: false,
toolbar: false,
filtering: false,

[avin-kavish]

Btw, how do I enable the PDF export option?

[shovelend]

I can't build the app with Next.js ever since jspdf has been added as a dep. Looks like jspdf can only run client-side not server side!
We don't need the Export as PDF feature (never asked for it), at least there should be a way to exclude it if you guys aren't thinking about removing it.

[niicojs]

A way to fix all that would be to move defaultExportPdf to a new module, which shouldn't be included by default.
The lib won't have a default export function, but it could be included using exportPdf={defaultExportPdf}.
Done that way, tree shaking should work.

[akhilmhdh]

Hey guys so is this getting fixed ...or is there a way to avoid the bundle

[linchen1987]

the tree shaking doesn't work in my code

import MaterialTable from 'material-table'

how to write code to implement tree shaking?

[seromenho]

Maybe export to pdf should live in user land and a sample on how to could be provided instead or this extracted to another package and that one having the jspdf dependency.
I've seen there's already a exportCsv prop you can in as a custom function, what do you think if jspdf is completely removed and a sample added on how to achieve such export? (such sample or package is mostly done with the defaultExport already)
Same for export as csv.

[niicojs]

That's what I did in my PR. Moving export function to a different file that you need to opt in.
So it gets tree shake if not used.

[seromenho]

Well it's similar then, not the same. I've entirely removed default exporters. Not sure though if it will be considered since it seems a refactor is going on.

[seromenho]

@mbrn Hey, https://github.com/mbrn/material-table/pull/2312 was closed and I'm sorry to come back to this its only because I'm not sure if I've explained well on the PR.

If removing this from core and create two optional packages is a viable solution I can help on create those packages from the removed code.
Eg: @material-table/pdf-export and @material-table/csv-export

Usage:

npm i @material-table/pdf-export 

import pdfExport from '@material-table/pdf-export'

<MaterialTable
      title="Export Function Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}        
      options={{
        exportButton: true,
        exportCsv: (columns, data) => {
          pdfExport(columns, data)
        }
      }}
    />

[peterbakonyi05]

I am putting here a temporary solution that seems to be working fine until material-table supports tree shaking of jspdf.

Install null-loader and in your webpack config you can add another rule:

module: {
    rules: [
        // your existing loaders are here and this is extra:
       {
           test: /jspdf/,
           use: 'null-loader',
       },
    ]
}

[masbaehr]

Sigh.. can't believe there is still no decent solution. I'm not using webpack, so the workaround is not an option. 300KB is simply too much to add as a rarely used dependency

[grigorii-horos]

I see react dnd too

[a-tonchev]

jspdf,
react-beautiful-dnd
date-fns

They do the library big. But it is really a no-go for PWA-s.

Is there any solution soon?