How to display data in a table?

Question

JavaScript

There is an array with objects like this:
[{arr: [1,2,3,4,5]},{arr: [10, 20, 30, 40, 50]}]
How to display data in a table so that it looks like this on the page? (indentation is not important)

Answer 1

Make rows from columns:

const rows = data.length
  ? data[0].arr.map((n, i) => data.map(m => m.arr[i]))
  : [];

Well, render:

<table>
  <tbody>
    {rows.map(n => <tr>{n.map(m => <td>{m}</td>)}</tr>)}
  </tbody>
</table>

https://jsfiddle.net/s9q0xr78/