How to add a total column to reactjs in mobile view

Viewed 8

I need to display a Total column in my view as shown below. I have used the map function to show the values and this is how my code looks so far. Now I need to display a total column by adding the values. What is the best way to achieve that?.

<div className="shiftmbLower">
                    <div></div>
                    <div className="shiftmb_header">Frz</div>
                    <div className="shiftmb_header">Clr</div>
                    <div className="shiftmb_header">Dry</div>
                    <div className=" forksHeader">Forks</div>
                    <div className="subheader_mb_shift"><div>Active FL</div>
                        <div>Pallets/Hr</div>
                        <div>Pallets Done</div>
                        <div>Pallets Left</div>
                        <div>Hours Remaing</div>
                    </div>
                    {
                        props.sdata.sfDetails && props.sdata.sfDetails
                            .map(data => {
                                const dmdData = props.sdata.shiftDDDDDDetails.find(dmdRow => dmdRow.area == data.area);
                                return data.area === 'Total' ? null : <div className="subheader_mb_shift">
                                    <div>{data.put_active}</div>
                                    <div>{(props.day) ? isNaN(parseFloat(data.put_pal).toFixed(1)) ? 0 : parseFloat(data.put_pal).toFixed(1) :
                                        isNaN(parseFloat(dmdData.pal_hr).toFixed(1)) ? 0 : parseFloat(dmdData.pal_hr).toFixed(1)}</div>
                                    <div>{props.day ? data.put_done || 0 : data.dmd_done}</div>
                                    <div>{props.day ? data.put_left || 0 : data.dmd_left}</div>
                                    <div>{props.day ? isNaN(parseFloat(data.put_hour).toFixed(1)) ? 0 : parseFloat(data.dmd_hour).toFixed(1) : ''}</div>
                                </div>
                            })
                    }
                </div>

Final look I need

0 Answers
Related