How can I display two values e.g. name and price?
In the code below, only the price is displayed:
{
Header: 'Price',
accessor: (row) => row.price,
Cell: (props) => ({
props.value !== []
? props.value.map(({ name, price }) => (name && price)).join(", ")
: ''
})
)
},
props.value.map(({ name, price }) => (`${name} ${price}`)).join(", ")
concatenate the strings
name + " " + price
or
`${name} ${price}`
You can simplify your column definition to:
{
Header: 'Price',
accessor: 'price',
Cell: ({ row: { values: { name, price } } }) => `${name} ${price}`,
},
The react-table library's Cell callback on a column has access to the row's data i.e. values.