Adding multiple data to a column in react-table - reactjs

Question

I have a table using react-table but for one of the columns I want to show two pieces of data - name and description.
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>
)
}
Where the accessor is Product I want to show both the name and description (I'll style them to stack with different font sizes) in the Product column.
I've tried using the Cell: row => attribute for that column and thought I could also try calling a function that lays it out, but I've gotten errors both times.
Any ideas how to do this?

Answer 1

Indeed you should use Cell for this like this:
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}) => { //spread the props
return (
<div>
<span className="class-for-name">{row.product.name}</span>
<span className="class-for-description">{row.product.description}</span>
</div>
)
}
}]
}]}
defaultPageSize={10}
className="-highlight"
/>
</div>
)
}
Another thing I spotted was that product property should be an object not an array, so change this:
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
to this:
product: {
name: 'blue shirt',
description: 'This is a blue shirt.'
}

Answer 2

The accepted answer didn't work for me. Here's how I did it:
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>
</>
),
},
]);