dynamically generate headings and rows reactjs using map - nested

Question

I looked for similar issues but couldnt find a solution. I am able to generate the headings column and the rows with the values. but since they are done separately, the alignment is off. so, is there a way to make it better aligned or maybe nest it in a way that only trowz is enough?? without the iteration being done in tvalues separately?

here's the related code

 let keysForSalaryMonth=Object.keys(this.props.stateprops.salarysheet[this.props.stateprops.salaryForMonth]);
    let salaryProperties = Object.keys(this.props.stateprops.salarysheet[this.props.stateprops.salaryForMonth][keysForSalaryMonth[0]]);
    let salaryObj = this.props.stateprops.salarysheet[this.props.stateprops.salaryForMonth];
    console.log(salaryObj[keysForSalaryMonth[0]][name]);
  const trowz = (<table><th>
    {salaryProperties.map((item)=>
      <td>{item}</td>
    )}
    </th>
     </table>
  );

  const tvalues = (<table>
     { keysForSalaryMonth.map((epf)=>{
      return  (<tr>
       {salaryProperties.map((prprty)=>
      <td>{salaryObj[epf][prprty]} </td> 

      )}
    </tr>)
    }
    )}

      </table>);

    return(
      <div>
        {trowz}
      {tvalues}
        </div>
    )
  }

the intended html is somewhat like this

<table>
<th><td>name</td><td>amount</td>wages</td></th>
<tr><td>Jack</td><td>34543</td>39999</td>

  </table>

and it is coming like that too. the problem is that the column names are not aligned with the column values as they are not the same length. so, how do I get them to be aligned properly?

at the moment, it looks like this

I do have an idea now of why this was happening. I think it could be because both trowz and tavalues are in different tables. Now, I am trying to put them in the same table but it's not working

here's the revised format of how it looks now, when I try to put it in the same table. Please tell me where I am going wrong.

const trowz = (<th>
    {salaryProperties.map((item)=>
      <td>{item}</td>
    )}
    </th>

  );
  const tvalues =( keysForSalaryMonth.map((epf)=>{
     return   salaryProperties.map((prprty)=>
      <tr>  <td>{salaryObj[epf][prprty]} </td> </tr>

    )})
  );

    return(
      <table>
        {trowz}
     {tvalues}
        </table>
    )
  }

@A Iglesias, your solution makes it look like this which is similar to what i was getting with the edited code above.

the generated html

 <table>
<th>
<td>name</td><td>epf</td><td>hra</td><td>days</td><td>wagesrate</td><td>basicSalary</td><td>totalWages</td><td>totalAmountPayable</td><td>da</td><td>totalAmount</td><td>pfValue</td><td>esiValue</td><td>totalDeduction</td>
</th>
<tbody>
<tr><td>pintu</td><td>98798789</td><td>902</td><td>2</td><td>8789</td><td>987987</td><td>17578</td><td>18033</td><td>454.6</td><td>18935</td><td>2164</td><td>331</td><td>2495</td></tr>
</tbody>
</table>

can you add your intended HTML output?

Emad Emami
– Emad Emami

2017-12-13 04:44:43 +00:00
Commented Dec 13, 2017 at 4:44 — Emad Emami
– Emad Emami, Commented Dec 13, 2017 at 4:44

A. Iglesias · Accepted Answer · 2017-12-13 16:49:12Z

1

For what you say and show, the content is ok, is just a formatting problem. And for want it makes more sense to me to have the information organized in a single table, so you can go with...

return (
  <table>
    <thead>
      <tr>
        {salaryProperties.map((item,i) => (
          <th key={i}>{item}</th>
        ))}
      </tr>
    </thead>
    <tbody>
      {keysForSalaryMonth.map((epf,i) => (
        <tr key={i}>
          {salaryProperties.map((prprty,j) => (
            <td key={j}>{salaryObj[epf][prprty]}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
)

You should choose a better option for the key of each element instead of the map index value. Get one that makes sense for the content of the element.

edited Dec 13, 2017 at 16:49

answered Dec 13, 2017 at 6:21

A. Iglesias

2,6752 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

faraz Over a year ago

well, not quite. it's very much out of alignment. i shared a picture of what it looks like when I use your solution in my question above.

A. Iglesias Over a year ago

Can you please show the generated html of the table?

faraz Over a year ago

added the generated html. removed the <thead> as I was trying to see if removing that helps, but it didnt.

A. Iglesias Over a year ago

Upps!! Sorry, I set the table header tr,th elements wrong!! I've edited the answer

Collectives™ on Stack Overflow

dynamically generate headings and rows reactjs using map - nested

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related