react material-table export render columns doesn't work

user_8670809 0
Viewed 839

I'm using material-table and i need to export a table, but the rendered columns doesn't appear in the exported file and the others yes it does,here is a part of my code:

             {inputs.invoices.length  ? <MaterialTable 
                    columns={[
                      { title: '#',export: true, render: (invoice) => {
                        return `${invoice.prefix}-${invoice.invoiceNumber}`;
                      }},
                      { title: 'value',export: true, field: 'value' , type: 'currency'},
                      { title: 'status',export: true, render: (invoice) => {
                        var invoiceStatus = invoice.idInvoiceStatus;
                        return (invoiceStatus.name ? ' ' + invoiceStatus.name : '');
                      }},
                      { title: 'balance',export: true, field: 'balance' , type: 'currency'},
                      { title: 'date',export: true, field: 'dateCreated' , type: 'datetime'}
                    ]}
                    data={inputs.invoices}
                    title="Invoices List"
                    options={{
                      exportButton: true,
                      filter: true,
                      filterList: inputs.invoices,
                      headerStyle: {
                        backgroundColor: '#01579b',
                        color: '#FFF',
                        zIndex: '0'
                      }
                    }}
                  /> : null }

There is a way to solve this?

material-table reactjs
1 Answers

I understand that your example doesn't work because export functionality takes into consideration data and columns. Whatever you do during column custom rendering shouldn't affect the data the table is working with. You can check an example of this definition on Overriding Export Function Example.

So, depending on the context you are working on (data size, amount of columns, how many custom renderings, etc) I would consider two options:

  • Add extra columns to your columns definition ( ofcourse it means also expanding your data definition) including those new calculated values, and then work with columns props definition to set the ones you choose as hidden, and define the boolean prop export in each case yoou need.

or

  • Perfom this transformations to your data model during the export function. You could achieve that by providing a custom export function as susgested on the link to the ofitial docs above. Here is the code of the defaultExportCsv function that may come handy:

     defaultExportCsv = () => {
   const [columns, data] = this.getTableData();

   let fileName = this.props.title || "data";
   if (this.props.exportFileName) {
     fileName =
     typeof this.props.exportFileName === "function"
       ? this.props.exportFileName()
       : this.props.exportFileName;
   }

 const builder = new CsvBuilder(fileName + ".csv");
   builder
     .setDelimeter(this.props.exportDelimiter)
     .setColumns(columns.map((columnDef) => columnDef.title))
     .addRows(data)
     .exportFile();
 };

Hope that works for you!

user_105692200
Related