如何自定义 material-table 中的默认导出选项

Question

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

我希望只有一个 excel 选项。

如何更改菜单？

谢谢

Answer 1

像这样在 MT 组件上定义 options 将允许您 show/hide 每个选项：

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

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

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

看起来官方文档有点过时了，所以我在 GitHub:

中找到了您在这些线程上寻找的答案

工作沙箱here。祝你好运！

Answer 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`);
}

如何自定义 material-table 中的默认导出选项

How to customize default export option in material-table

reactjs

material-ui

material-table