admin管理员组文章数量:1026103
How can I tell react-table to show a sub-ponent/react-table for a selected Rows nested Child Object?
For example,
[
{
"objectA":{
"field1":"field1Data",
"nestedObjectA":{
"nestedfield1":"nestedfield1Data",
"nestedNestedObjectA":{
"nestedNestedObjectA":"nestedNestedObjectA",
"nestedNestedObjectB":"nestedNestedObjectB"
}
}
}
}
]
In the json above I will be creating react-table for objectA which will display its fields. Once the user selects objectA row, I want to show a nested table for the selected rows nested data.
In the examples given in react-table docs here or here doesnt contain much plex situations. The main concern here is to tell react-table that I have selected a row and for this selected rows data we have to create a separate table right underneath it. How can I achieve this? Thank you.
How can I tell react-table to show a sub-ponent/react-table for a selected Rows nested Child Object?
For example,
[
{
"objectA":{
"field1":"field1Data",
"nestedObjectA":{
"nestedfield1":"nestedfield1Data",
"nestedNestedObjectA":{
"nestedNestedObjectA":"nestedNestedObjectA",
"nestedNestedObjectB":"nestedNestedObjectB"
}
}
}
}
]
In the json above I will be creating react-table for objectA which will display its fields. Once the user selects objectA row, I want to show a nested table for the selected rows nested data.
In the examples given in react-table docs here or here doesnt contain much plex situations. The main concern here is to tell react-table that I have selected a row and for this selected rows data we have to create a separate table right underneath it. How can I achieve this? Thank you.
Share Improve this question edited Aug 22, 2019 at 0:45 Ahmed asked Aug 22, 2019 at 0:34 AhmedAhmed 3,2708 gold badges45 silver badges76 bronze badges1 Answer
Reset to default 2I figured it out myself. But still if anyone else has a more elegant solution please feel free to share.
Added a few lines to the example code in the links shared above. data and the row from subComponent have some significance in this.
In short I am calling a map function in data to check if id in row.original from subponent matches the id in data item.
In short,
data={rowData => rowData.map(item => {
if (item.id === row.original.id) {
return item.nestedChild;
} else {
// Since an empty array is expected otherwise React-Table will //result in error.
return [];
}
}
rowData is the actual data used as the source of the Nested React-Table. row.original is the data of the original item which can be used to check if the data matches.
Example,
<ReactTable
data={data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
SubComponent={row => {
return (
<div style={{ padding: "20px" }}>
<em>
You can put any ponent you want here, even another React
Table!
</em>
<br />
<br />
<ReactTable
data={rowData =>
rowData.map(item => {
if (item.id === row.original.id) {
return item;
} else {
return [];
}
})
}
columns={columns}
defaultPageSize={3}
showPagination={false}
SubComponent={row => {
return (
<div style={{ padding: "20px" }}>
Another Sub Component!
</div>
);
}}
/>
</div>
How can I tell react-table to show a sub-ponent/react-table for a selected Rows nested Child Object?
For example,
[
{
"objectA":{
"field1":"field1Data",
"nestedObjectA":{
"nestedfield1":"nestedfield1Data",
"nestedNestedObjectA":{
"nestedNestedObjectA":"nestedNestedObjectA",
"nestedNestedObjectB":"nestedNestedObjectB"
}
}
}
}
]
In the json above I will be creating react-table for objectA which will display its fields. Once the user selects objectA row, I want to show a nested table for the selected rows nested data.
In the examples given in react-table docs here or here doesnt contain much plex situations. The main concern here is to tell react-table that I have selected a row and for this selected rows data we have to create a separate table right underneath it. How can I achieve this? Thank you.
How can I tell react-table to show a sub-ponent/react-table for a selected Rows nested Child Object?
For example,
[
{
"objectA":{
"field1":"field1Data",
"nestedObjectA":{
"nestedfield1":"nestedfield1Data",
"nestedNestedObjectA":{
"nestedNestedObjectA":"nestedNestedObjectA",
"nestedNestedObjectB":"nestedNestedObjectB"
}
}
}
}
]
In the json above I will be creating react-table for objectA which will display its fields. Once the user selects objectA row, I want to show a nested table for the selected rows nested data.
In the examples given in react-table docs here or here doesnt contain much plex situations. The main concern here is to tell react-table that I have selected a row and for this selected rows data we have to create a separate table right underneath it. How can I achieve this? Thank you.
Share Improve this question edited Aug 22, 2019 at 0:45 Ahmed asked Aug 22, 2019 at 0:34 AhmedAhmed 3,2708 gold badges45 silver badges76 bronze badges1 Answer
Reset to default 2I figured it out myself. But still if anyone else has a more elegant solution please feel free to share.
Added a few lines to the example code in the links shared above. data and the row from subComponent have some significance in this.
In short I am calling a map function in data to check if id in row.original from subponent matches the id in data item.
In short,
data={rowData => rowData.map(item => {
if (item.id === row.original.id) {
return item.nestedChild;
} else {
// Since an empty array is expected otherwise React-Table will //result in error.
return [];
}
}
rowData is the actual data used as the source of the Nested React-Table. row.original is the data of the original item which can be used to check if the data matches.
Example,
<ReactTable
data={data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
SubComponent={row => {
return (
<div style={{ padding: "20px" }}>
<em>
You can put any ponent you want here, even another React
Table!
</em>
<br />
<br />
<ReactTable
data={rowData =>
rowData.map(item => {
if (item.id === row.original.id) {
return item;
} else {
return [];
}
})
}
columns={columns}
defaultPageSize={3}
showPagination={false}
SubComponent={row => {
return (
<div style={{ padding: "20px" }}>
Another Sub Component!
</div>
);
}}
/>
</div>
本文标签： javascriptReactTable Show Nested Table for a selected rows nested dataStack Overflow
版权声明：本文标题：javascript - React-Table: Show Nested Table for a selected rows nested data - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745630370a2160126.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论