如何将我的数组对象放入材质 ui 表中答案

【问题标题】：How to get my array object into a material ui table如何将我的数组对象放入材质 ui 表中
【发布时间】：2023-03-04 15:17:01
【问题描述】：

我有一个数组，我想将其放入材质 ui 表中。这是我的数组的结构，取自我导入的文件（使用 react papa parse 3）：

https://react-papaparse.js.org/

这是我试图将数据放入的代码的链接：

https://codesandbox.io/s/htvjz?file=/demo.js

我对数组的结构有点困惑，在这方面相对较新。我的行数据是否与其中的“数据”级别一起增加了一层？

我怎样才能把这个放到上面链接的材料ui数组表中？

整天都在这上面转来转去。

【问题讨论】：

您想从数组中的每个对象创建一行并使用data 元素来填充列吗？
有点不确定你的意思。我希望将第一行（即 0）作为标题，将第 1 到 10 行作为填充表格的数据。在我之前见过的数组示例中，没有这个额外的数据级别，所以我对如何设置行感到困惑。
我已经解决了这个问题。 Papaparse 可以选择将导入的 csv 文件转换为上面显示的格式，方法是将 header:true 添加到配置文件中。全部完成！

标签： arrays reactjs material-ui

【解决方案1】：

您显示的链接使用表格。这非常类似于 HTML 表格。

我可以推荐使用 a 代替。它更易读、写得更快、更强大。

import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';

// define which columns you have in your data
const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'firstName', headerName: 'First name' },
  { field: 'lastName', headerName: 'Last name' },
];

// your rows.. you probably won't hard code them but get them from elsewhere
// but they should look like this:
const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon'},
  { id: 2, lastName: 'Lannister', firstName: 'Cersei'},
  { id: 3, lastName: 'Lannister', firstName: 'Jaime' },
  { id: 4, lastName: 'Stark', firstName: 'Arya' }
];

...

// Then, wherever you want to have your grid, do this:

<DataGrid rows={rows} columns={columns} />

【讨论】：

谢谢。我喜欢你的推荐。我遇到的部分困难是理解我的数组的结构，这样我就可以按照你的建议设置列和行。有这个额外的“数据”级别，我不知道如何处理它。
我已经解决了这个问题。 Papaparse 可以选择将导入的 csv 文件转换为上面显示的格式，方法是将 header:true 添加到配置文件中。全部完成！