反应材料表导出渲染列不起作用答案

【问题标题】：react material-table export render columns doesn't work反应材料表导出渲染列不起作用
【发布时间】：2021-03-11 05:53:41
【问题描述】：

我正在使用材料表，我需要导出一个表，但渲染的列没有出现在导出的文件中，其他列是的，这是我的代码的一部分：

             {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 }

有办法解决这个问题吗？

【问题讨论】：

标签： reactjs material-table

【解决方案1】：

我了解您的示例不起作用，因为导出功能考虑了data 和columns。无论您在列自定义呈现期间做什么，都不应影响表正在使用的数据。您可以在 Overriding Export Function Example 上查看此定义的示例。

因此，根据您正在处理的上下文（数据大小、列数、自定义渲染的数量等），我会考虑两种选择：

在列定义中添加额外的列（当然这也意味着扩展您的数据定义）包括那些新计算的值，然后使用列道具定义来设置这些值您选择hidden，并在每个中定义布尔属性export 以备不时之需。

或

在导出期间对您的数据模型执行此转换功能。您可以通过提供自定义导出来实现功能与上述官方文档的链接相同。这是 defaultExportCsv 函数的代码可能会派上用场：

 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();
 };

希望对你有用！

【讨论】：