[英]How to get and link nested value to field passing columns to Material Table
I'm trying to create a table and I have nested data like this:我正在尝试创建一个表,并且我有这样的嵌套数据:
[{
id: 24,
name: "DANIEL TSUTOMU OBARA",
number: "134",
phone: "11111111111",
rg: "4034092666",
EmployeeStatus: {
createdAt: "2019-08-07T14:38:52.576Z"
description: "Documentos rejeitados"
id: 3
updatedAt: "2019-08-07T14:38:52.576Z"
},
Sector: {
id: 2,
name: "Controladoria"
}
}]
And have this structure columns table:并有这个结构列表:
columns: [
{ title: "Nome", field: "name" },
{ title: "CPF", field: "cpf" },
{ title: "Função", field: "FunctionId", lookup: {} },
{
title: "Setor",
field: "SectorId",
lookup: {}
},
{
title: "Status",
field: "EmployeeStatus", <------- I want to get description here
editable: "never"
}
],
Then, I need to pass these columns into my Material-table like this:然后,我需要将这些列传递到我的材料表中,如下所示:
<MaterialTable
columns={state.columns}
data={state.data}
title=""
icons={tableIcons}
editable={{
onRowAdd: newData => createInstructor(newData),
onRowUpdate: async (newData, oldData) =>
updateInstructor(newData, oldData),
onRowDelete: oldData => deleteInstructor(oldData)
}}
/>
So, how I can do that access nested data into column field?那么,我怎样才能将嵌套数据访问到列字段中呢?
Thanks!谢谢!
Please find the below solution.请找到以下解决方案。 I am expecting the data to have other objects too, so finding the first object with the key available.
我希望数据也有其他对象,因此找到第一个 object 和可用的密钥。
let data = [{ id: 24, name: "DANIEL TSUTOMU OBARA", number: "134", phone: "11111111111", rg: "4034092666", EmployeeStatus: { createdAt: "2019-08-07T14:38:52.576Z", description: "Documentos rejeitados", id: 3, updatedAt: "2019-08-07T14:38:52.576Z" }, Sector: { id: 2, name: "Controladoria" } }] let columns = [ { title: "Nome", field: "name" }, { title: "CPF", field: "cpf" }, { title: "Função", field: "FunctionId", lookup: {} }, { title: "Setor", field: "SectorId", lookup: {} }, { title: "Status", field: "EmployeeStatus", editable: "never" } ]; let columnToUpdate = columns.find(obj => obj.title==="Status"); //find the column in columns array let desc = data.find(obj => Object.keys(obj).includes('EmployeeStatus')).EmployeeStatus.description; // get description columnToUpdate.field = desc; // mutate the object console.log(columns);
I just decided to use lookup functionality and solve in this way for now.我只是决定暂时使用查找功能并以这种方式解决。
const [state, setState] = useState({
columns: [
{ title: "ID", field: "id", editable: "never" },
{ title: "Nome", field: "name" },
{ title: "CPF", field: "cpf" },
{ title: "Função", field: "FunctionId", lookup: {} }, // 3
{
title: "Setor",
field: "SectorId",
lookup: {}
}, // 4
{
title: "Status",
field: "EmployeeStatusId",
lookup: {},
editable: "never"
}, // 5
]});
....
await api
.get(`/employee-status`)
.then(result => {
status = formatSectors(state, result, 5);
})
.....
const formatSectors = (state, result, position) => {
let columns = state.columns;
const indexColumnSector = 4;
columns[position].lookup = result.data.rows.reduce(
(accumulator, currentValue) => {
accumulator[currentValue.id] =
position === indexColumnSector
? currentValue.name
: currentValue.description;
return accumulator;
},
{}
);
return columns;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.