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

Question

我正在使用材料表，我想删除默认的 CSV 和 PDF 导出选项。

我只想有一个 Excel 选项。

我怎样才能更改菜单​​？

谢谢

Answer 1

对于自定义 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`);
}

Answer 2

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

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

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

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

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

• 导出按钮
• 本土化

在这里工作沙箱。祝你好运！