gpt4 book ai didi

javascript - 如何使用对象键在 mui 数据表中设置列名称

转载 作者:行者123 更新时间:2023-12-02 22:22:30 25 4
gpt4 key购买 nike

我正在尝试使用对象键来设置 MUI 数据表中的列名称。我正在尝试使用 Children.childName 的第一个元素设置其中一个列名称这样在该列中它将显示子名称列表,但仅显示第一个子名称。

以当前尝试的方式,我没有收到任何错误,并且它在表格上的 childName 列中没有显示任何内容。

如何访问数组内的对象?

screen shot of display table

这是我的数据:

    const data = [
{
name: "Pat",
company: "Test Corp",
city: "Yonkers",
state: "NY",
children: [
{ childName: "Pat Jun", childAge: 2 },
{ childName: "Mary Jun", childAge: 2 }
]
},
];


const columns = [
{
name:name: data[0]["children"][0]["childName"],
label: "Child Name",
options: {
filter: true,
sort: true
}
}]

MuiTable.js

function MuiTable({ forms }) {
console.log("cols", columns);
return (
<MUIDataTable
title={"Title"}
data={data}
columns={columns}
options={options}
/>
);
}

通过执行 console.log,我可以看到它正在打印值而不是对象键名称

console.log of columns

我非常感谢任何帮助,谢谢。

最佳答案

您需要像这样使用customBodyRender:

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { Typography } from "@material-ui/core";

import "./styles.css";

function App() {
const data = [
{
name: "Pat",
company: "Test Corp",
city: "Yonkers",
state: "NY",
children: [
{ childName: "Pat Jun", childAge: 2 },
{ childName: "Mary Jun", childAge: 2 }
]
}
];

const columns = [
{
name: "children",
label: "Child Names",
options: {
filter: true,
sort: true,
customBodyRender: (value, tableMeta, updateValue) => (
<Typography>
{value.map(child => child.childName).join(",")}
</Typography>
)
}
}
];

return (
<div>
<MUIDataTable title={"Title"} data={data} columns={columns} />
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

关于javascript - 如何使用对象键在 mui 数据表中设置列名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59183082/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com