如何在材料表中自定义默认导出选项

Posted 2023-02-22

【中文标题】如何在材料表中自定义默认导出选项

【英文标题】：How to customize default export option in material-table

【发布时间】：2021-03-08 09:05:09

【问题描述】：

我正在使用material-table，我想删除默认的 CSV 和 PDF 导出选项。

我希望只有一个 Excel 选项。

如何更改菜单？

谢谢

【问题讨论】：

表示您删除 export as pdf 并将文本从 export as csv 重命名为 export as excel?

是的。最终我想以excel格式导出表格数据。

csv是excel格式

【参考方案1】：

像这样在 MT 组件上定义 options 将允许您显示/隐藏每个选项：

  options=
      // ..other options
      exportButton: 
        csv: true,
        pdf: false
      
   

另外，您可以使用localization 设置重命名每个选项的标签，如下所示：

 localization=
      toolbar: 
        exportCSVName: "Export some Excel format",
        exportPDFName: "Export as pdf!!"
      
    

看起来官方文档有点过时了，所以我在 GitHub 的这些线程上找到了您正在寻找的答案：

exportButton localization

工作沙盒here。祝你好运！

【讨论】：

完美！我也在使用没有这个选项的旧版本。谢谢

【参考方案2】：

对于自定义 CSV 和 PDF，您应该定义 options

 options=
    exportButton: 
       csv: true,
       pdf: true,
    
 

并且应该为处理程序定义更多选项

 options=
    exportButton: 
       csv: true,
       pdf: true,
    ,
    exportCsv: (data, columns) => console.log(data, columns, '<== CSV'),
    exportPdf: (data, columns) => console.log(data, columns, '<== PDF'),
 

在 CSV 的处理函数中，您可以使用 filefy 包

import  CsvBuilder  from 'filefy';

对于 PDF，您可以使用 jspdf 和 jspdf-autotable 包

import jsPDF from 'jspdf';
import 'jspdf-autotable';

还有处理程序示例

exportCsv: (data, columns) => 
  const columnTitles = columns
      .map(columnDef => columnDef.title);
  
  const csvData = data.map(rowData =>
        columns.map(columnDef => rowData[columnDef.field]),
      );

  const builder = new CsvBuilder(`data.csv`)
        .setColumns(columnTitles)
        .addRows(csvData)
        .exportFile();

  return builder;

exportPdf: (data, columns) => 
  const doc = new jsPDF();

  const columnTitles = columns
      .map(columnDef => columnDef.title);
  
  const pdfData = data.map(rowData =>
        columns.map(columnDef => rowData[columnDef.field]),
      );

  doc.autoTable(
     head: [columnTitles],
     body: pdfData,
  );

  doc.save(`data.pdf`);