下载 CSV 在 mui 数据表中的 customBodyRender 列中不起作用

Question

我正在尝试从 mui 数据表 下载 CSV，当我尝试下载时，它将获得 [Object] 符号而不是付款人对象的值。
仅在渲染对象时才会出现此问题。弦完全没问题。

有没有办法自定义下载操作？

我需要获得外部图书馆的支持吗？

这是我的代码

const columns = [
  {
    name: "payer",
    label: <p style={styles.colHeader}>{"Payer"}</p>,
    options: {
      customBodyRender: (payer) => {
        return (
          <React.Fragment>
            <Typography
              style={styles.firstLine}
            >{`${payer.firstName} ${payer.lastName}`}</Typography>
            <Typography style={styles.secondLine}>
              {`Membership ID : ${payer.membership}`}
            </Typography>
          </React.Fragment>
        );
      },
    },
  },
]

const options = {
  filterType: "checkbox",
};


const data = [
  {
    payer: {
      firstName: "SUNIL",
      lastName: "WAIDYARATHNE",
      membership: "3302",
    },
  },
  {
    payer: {
      firstName: "DANAPALA",
      lastName: "GUNASIRI",
      membership: "3302",
    },
  },
];

Answer 1

下载操作可以在OnDownload选项

中覆盖

1. 为什么会出现这种情况
2. 如何解决这个问题

在你的列 - >列名称是player，mui-datatables映射列

name

在

columns

对象的

property

对象

data

中。有玩家对象而不是字符串。这就是它打印的方式 [Object object]

要覆盖该函数，请使用 mui-datatables 中的 OnDownload 选项。

const options = {
  filterType: "checkbox",
  onDownload: (buildHead, buildBody, columns, data) => {
    buildHead = () => {
       return ["col-1","col-2"]
    }
    buildBody = () => {
     return [["A", "B"],["C", "D"]];
    }
    return "\uFEFF" + buildHead() + buildBody();
  }
};

Answer 2

您可以通过该列选项中的“下载”键将特定列配置为包含在下载（csv）中或不包含在下载中。默认情况下这是正确的。您必须将其设置为 false，如下所示。

const columns = [
  {
    name: "payer",
    label: <p style={styles.colHeader}>{"Payer"}</p>,
    options: {
      download: false, //just add this
      customBodyRender: (payer) => {
        return (
          <React.Fragment>
            <Typography
              style={styles.firstLine}
            >{`${payer.firstName} ${payer.lastName}`}</Typography>
            <Typography style={styles.secondLine}>
              {`Membership ID : ${payer.membership}`}
            </Typography>
          </React.Fragment>
        );
      },
    },
  },
]

Answer 3

我已经找到了更好的解决方案。将下面的下载回调添加到 MUIDatatable 选项。这将识别列定义是否附加了 customBodyRender，并基于此传递值以填充导出数据。 在“mui-datatables ^4.3.0

”上测试

onDownload: (buildHead, buildBody, columns, data) => {
    const alteredData = data?.map((row, index) => ({
      index,
      data: row?.data?.map((field, index) => {
                if (columns[index].customBodyRender) {
                    return columns[index].customBodyRender(field)
                }
                return field
            }),
    }))
    return `${buildHead(columns)}${buildBody(alteredData)}`.trim()
  },

当您按如下方式连接数据库表来创建 MUI 数据表时，这会很有帮助：

const columns = [
   {
      name: "category",
      label: "Category",
      options: {
       filter: false,
       sort: false,
       customBodyRender: (value, tableMeta, updateValue) => {
          return value?.category_name;
        }
      }
   }
];