如何将Material-UI表格导出为CSV？

Question

有人能解释一下如何将 material-ui 表格导出为 CSV 文件吗？

 <Paper> 
    <Table>
      <TableHead>
        <TableRow>

            <TableCell>A</TableCell>
            <TableCell >B</TableCell>
            <TableCell>C</TableCell>
            <TableCell>D</TableCell>

        </TableRow>
      </TableHead>
      <TableBody>
        {this.rows.map(row => {
            return (
                <TableRow key={row.ID}>
                  <TableCell>{row.A}   </TableCell>
                  <TableCell >{row.B}</TableCell>
                  <TableCell>{row.C}</TableCell>   
                  <TableCell >{row.D}</TableCell>                
                </TableRow>
            );
        })}
      </TableBody>
    </Table>
  </Paper>

我需要创建一个组件，可以将这个表格导出为csv格式。

- ste.co_

Answer 1

在 Material-UI 的 表格页面“Complementary projects”部分中，他们推荐使用 material-table。

material-table 的一个属性是 exportButton={true}，它可以渲染一个 CSV 导出按钮。

- bArmageddon

Answer 2

如果您想自己开发解决方案，您可以使用filefy，这也是material-table在幕后使用的工具。

npm i --save filefy

那么

import { CsvBuilder } from 'filefy';
//...
const builder = new CsvBuilder('filename.csv');
builder
  .setDelimeter(',')
  .setColumns(['A', 'B', 'C', 'D' ])
  .addRows(data)
  .exportFile();

rows 是一个包含多个数组的数组，例如：

const rows = [
                [ 'r1c1', 'r1c2', 'r1c3', 'r1c4'],
                [ 'r2c1', 'r2c2', 'r2c3', 'r2c4'],
]

这里有些矛盾，因为<TableCell>可以包含其中的jsx代码（即使在您的情况下没有），所以您不能简单地从<Table>中“倾倒”数据，因为它可能不是纯文本。

如果您有像在您的情况下一样的简单字符串值，那么定义一个string[][]可能适用于您的jsx和CsvBuilder。

- wal

Answer 3

您可以使用 exportAllData: true 导出所有数据，无需使用 filefy。

<MaterialTable
              columns={
                  columns}
                  data={data}
                  title="Export all"
          
            options={{
            exportButton: true,
            exportAllData: true
            }} >

- arun-r

Answer 4

您可以将 Table mui 组件替换为 Data Grid mui 组件，该组件具有开箱即用的 导出 功能。这样，您就不需要使用其他第三方库。

- benshabatnoam