Содержимое моего аккордеона отображается только в первом столбце таблицы, а не как целая строка.
<Table>
<Table.Header>
<Table.HeaderCell>Image</Table.HeaderCell>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
<Table.HeaderCell>Location</Table.HeaderCell>
<Table.HeaderCell>Status</Table.HeaderCell>
</Table.Header>
<Accordion
fluid={true}
as={Table.Body}
panels={results.map(obj => {
return {
key: obj.id,
title: {
as: Table.Row,
className: '',
children: [
<Table.Cell key={obj.id}>
<Image
title='Click to zoom'
src={
obj.image || 'https://placeimg.com/640/480/any'
}
size='tiny'
/>
</Table.Cell>,
<Table.Cell key={obj.id}>{obj.name}</Table.Cell>,
<Table.Cell key={obj.id}>{obj.description}</Table.Cell>,
<Table.Cell key={obj.id}>{obj.location}</Table.Cell>,
<Table.Cell key={obj.id}>
{obj.resolved ? 'Item found' : 'Item not found'}
</Table.Cell>
]
},
content: {
children: [
<Table.Cell key={obj.id}>{obj.name}</Table.Cell>,
<Table.Cell key={obj.id}>{obj.description}</Table.Cell>,
<Table.Cell key={obj.id}>{obj.location}</Table.Cell>,
<Table.Cell key={obj.id}>
{obj.resolved ? 'Item found' : 'Item not found'}
</Table.Cell>
]
}
}
})}
/>
</Table>
Как это исправить (сделать содержимое отдельной строкой независимой таблицы)? Все хаки заметны.