将多个数据添加到 react-table 中的列
Adding multiple data to a column in react-table
我有一个使用 react-table 的 table,但对于其中一列,我想显示两条数据 - 名称和描述。
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>
)
}
访问器所在的位置 Product
我想在“产品”列中同时显示名称和描述(我将设置它们的样式以使用不同的字体大小堆叠)。
我试过对该列使用 Cell: row =>
属性,我想我也可以尝试调用一个对其进行布局的函数,但我两次都遇到了错误。
有什么办法吗?
确实,您应该像这样使用 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.'
}
已接受的答案对我不起作用。这是我的做法:
const [data, setData] = React.useState([
{
name: 'My item',
desc: 'This is a nice item',
},
]);
const columns = React.useMemo(() => [
{
Header: 'Name',
accessor: 'name',
Cell: (props) => (
<>
<p className="item title">{props.row.original.name}</p>
<p className="item desc">{props.row.original.desc}</p>
</>
),
},
]);
我有一个使用 react-table 的 table,但对于其中一列,我想显示两条数据 - 名称和描述。
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>
)
}
访问器所在的位置 Product
我想在“产品”列中同时显示名称和描述(我将设置它们的样式以使用不同的字体大小堆叠)。
我试过对该列使用 Cell: row =>
属性,我想我也可以尝试调用一个对其进行布局的函数,但我两次都遇到了错误。
有什么办法吗?
确实,您应该像这样使用 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.'
}
已接受的答案对我不起作用。这是我的做法:
const [data, setData] = React.useState([
{
name: 'My item',
desc: 'This is a nice item',
},
]);
const columns = React.useMemo(() => [
{
Header: 'Name',
accessor: 'name',
Cell: (props) => (
<>
<p className="item title">{props.row.original.name}</p>
<p className="item desc">{props.row.original.desc}</p>
</>
),
},
]);