Myujth

I am looking for the solution where I would map the data to every table row with accordion where by clicking on it, it would expand the <div> under the table row.

this is the mapping of data to TableRow what I have so far:

 var mappedOrders = sortedOrders.map(order => 

 return (
 <Table.Row key=order._id>
 <Table.Cell>order.address.lastName + " " + order.address.firstName</Table.Cell>
 <Table.Cell>order.payment.vs</Table.Cell>
 <Table.Cell>
 <Button onClick=this.openOrderDetails(order) style= padding: '0.3em' size='medium' icon='edit' />
 <Button style= padding: '0.3em' size='medium' icon='check' />
 <Button style= padding: '0.3em' size='medium' icon='file pdf' />
 <Button style= padding: '0.3em' size='medium' icon='shipping fast' />
 <Button style= padding: '0.3em' size='medium' icon='close' />
 </Table.Cell>
 </Table.Row>
 )

)

<Table compact padded selectable basic='very'>
 <Table.Header>
 <Table.Row style= textAlign: 'center' >
 <Table.HeaderCell width=2>Name</Table.HeaderCell>
 <Table.HeaderCell width=1>VS</Table.HeaderCell>
 <Table.HeaderCell width=3>Actions</Table.HeaderCell>
 </Table.Row>
 </Table.Header>
 <Table.Body>
 mappedOrders
 </Table.Body>
</Table>