我有一个使用react-table的表,但是对于其中一个列,我想显示两个数据 - 名称和描述。
read.csv
如果访问者是data.table::fread
,我想在“产品”列中显示名称和描述(我将它们设置为使用不同的字体大小进行堆叠)。
我尝试使用该列的getInitialState(){
return {
data: [{
id: 1,
keyword: 'Example Keyword',
product: [
name: 'Red Shoe',
description: 'This is a red shoe.'
]
},{
id: 2,
keyword: 'Second Example Keyword',
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
}]
}
},
render(){
const { data } = this.state;
return (
<div className="app-body">
<ReactTable
data={data}
columns={[{
columns: [{
Header: 'Id',
accessor: id,
show: false
}, {
Header: 'Keyword',
accessor: 'keyword'
}, {
Header: 'Product',
accessor: 'product' // <<< here
}]
}]}
defaultPageSize={10}
className="-highlight"
/>
</div>
)
}
属性,并认为我也可以尝试调用一个函数来解决它,但我两次都遇到了错误。
任何想法如何做到这一点?
答案 0 :(得分:4)
确实你应该使用Cell
这样:
getInitialState(){
return {
data: [
{
id: 1,
keyword: 'Example Keyword',
product: [
name: 'Red Shoe',
description: 'This is a red shoe.'
]
},{
id: 2,
keyword: 'Second Example Keyword',
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
}]
}
},
render(){
const { data } = this.state;
return (
<div className="app-body">
<ReactTable
data={data}
columns={[{
columns: [{
Header: 'Id',
accessor: id,
show: false
}, {
Header: 'Keyword',
accessor: 'keyword'
}, {
Header: 'Product',
accessor: 'product',
Cell: row => {
return (
<div>
<span className="class-for-name">{row.row.product.name}</span>
<span className="class-for-description">{row.row.product.description}</span>
</div>
)
}
}]
}]}
defaultPageSize={10}
className="-highlight"
/>
</div>
)
}
我发现的另一件事是产品属性应该是一个对象而不是一个数组,所以改变这个:
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
到此:
product: {
name: 'blue shirt',
description: 'This is a blue shirt.'
}