admin管理员组文章数量:1318318
I have a data array as:
data = [ {date: "16/05/2020", value: [ {column: "student", count: 10, value: "abcd" },
{column: "teacher", count: 25, value: "pqrs" }] },
{date: "17/05/2020", value: [ {column: "student", count: 19, value: "mno" },
{column: "teacher", count: 7, value: "xyz" }] }
];
This is the column array:
columns = [{ Header: "Date", accessor: "date"},
{ Header: "Column", accessor: "column"},
{ Header: "Count", accessor: "count"},
{ Header: "Value", accessor: "value"}
]
I want to display the data as mentioned in the picture (table) in React Table.
Inside render(), I am doing this:
<ReactTable
data={data}
columns={columns}
minRows={0}
defaultPageSize={25}
/>
Kindly, help.
Thanks in Advance!!
I have a data array as:
data = [ {date: "16/05/2020", value: [ {column: "student", count: 10, value: "abcd" },
{column: "teacher", count: 25, value: "pqrs" }] },
{date: "17/05/2020", value: [ {column: "student", count: 19, value: "mno" },
{column: "teacher", count: 7, value: "xyz" }] }
];
This is the column array:
columns = [{ Header: "Date", accessor: "date"},
{ Header: "Column", accessor: "column"},
{ Header: "Count", accessor: "count"},
{ Header: "Value", accessor: "value"}
]
I want to display the data as mentioned in the picture (table) in React Table.
Inside render(), I am doing this:
<ReactTable
data={data}
columns={columns}
minRows={0}
defaultPageSize={25}
/>
Kindly, help.
Thanks in Advance!!
Share Improve this question asked May 16, 2020 at 11:15 ParikshaPariksha 451 gold badge1 silver badge8 bronze badges 4-
is
ReactTable
a 3rd party library? – zb22 Commented May 16, 2020 at 11:23 - Yes, it is a 3rd party library. – Pariksha Commented May 16, 2020 at 11:27
- can you add the link to its git repository? – zb22 Commented May 16, 2020 at 11:33
- I have not created git repository yet. – Pariksha Commented May 16, 2020 at 12:03
1 Answer
Reset to default 6You need to use the accessor
to get into the properties from data
and to custom the cells.
Try this:
const data = [
{
date: "16/05/2020",
value: [
{ column: "student", count: 10, value: "abcd" },
{ column: "teacher", count: 25, value: "pqrs" }
]
},
{
date: "17/05/2020",
value: [
{ column: "student", count: 19, value: "mno" },
{ column: "teacher", count: 7, value: "xyz" }
]
}
];
const columns = [
{
Header: "Date",
id: "date",
accessor: d => (
<div className="wrapper">
<div>{d.date}</div>
<div>{d.date}</div>
</div>
)
},
{
Header: "Column",
id: "column",
accessor: d => (
<div className="wrapper">
<div>{d.value[0].column}</div>
<div>{d.value[1].column}</div>
</div>
)
},
{
Header: "Count",
id: "count",
accessor: d => (
<div className="wrapper">
<div>{d.value[0].count}</div>
<div>{d.value[1].count}</div>
</div>
)
},
{
Header: "Value",
id: "value",
accessor: d => (
<div className="wrapper">
<div>{d.value[0].value}</div>
<div>{d.value[1].value}</div>
</div>
)
}
];
const App = () => {
return <ReactTable data={data} columns={columns} />;
};
and here is a sandbox:
本文标签: javascriptIs there a way to merge multiple columns in react tableStack Overflow
版权声明:本文标题:javascript - Is there a way to merge multiple columns in react table - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742045863a2417779.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论