I'm currently facing an issue where I need to set the name of a column in MUI Datatables using an object key. Specifically, I want to set one of the column names with the first element of children.childName so that it displays a list of child names, but only the first child.
Unfortunately, my current approach does not seem to be working as expected. There are no errors, yet nothing is being displayed in the childName Column on the table.
I'm curious if there's a way for me to access an object inside an array?
https://i.stack.imgur.com/jHMVQ.png
Here's an example of my Data:
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}
/>
);
}
When I use a console.log, I can see that it is printing the value instead of the object key name
https://i.stack.imgur.com/TUvdY.png
I would greatly appreciate any assistance. Thank you.