Ndtyjky

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>