Javascript 映射表数据二维数组

我有一个稍微奇怪的问题，我解决不了。我必须使用react呈现一个表-但是我的数据结构是这样的，我需要第一级的名称作为表标题-然后我需要将与该标题相关联的数据映射到表中正确的单元格中

这是我的数据

[{
    "cell_id": 1,
    "step_data": [{
      "width": 1920,
      "name": "bruce",
    }, {
      "width": 2236,
      "name": "ben",

      }],
        "cell_name": " boys names"
      },
{
        "cell_id": 2,
        "step_data": [{
          "width": 1920,
          "name": "grace",
        }, {
          "width": 2236,
          "name": "megan",

        }],
        "cell_name": "girls names"
      }

为了映射表标题，我这样做是为了动态呈现标题，但是我似乎无法将数据放在正确的标题下，因为它们都在同一行上

你知道我是怎么做的吗

我想要的任务是创建一个包含两个标题的表，即男孩姓名和女孩姓名-我需要男孩姓名中的step_数据位于男孩姓名标题下，女孩姓名中的step_数据位于女孩姓名标题下

<table className="table">
    <tbody>
      <tr>
        {this.props.data.map((item, key) => <th key={key}>{item.cell_name}</th>
        )}

      </tr>
      {this.props.data.map(data => data.map((z, key) => <td key={key}>{z.name}</td>))}

      <tr>

      </tr>

    </tbody>
  </table>

---

你能解释一下语法{step_data[i]|{}.name}我不确定我是否完全理解发生了什么？它会创建一个值为step_data[i].name的td，并防止在未定义step_data[i]时崩溃。如果一个数组比另一个数组长，就会发生这种情况。

{[
  ...Array( // get the number of rows you need to create
    Math.max(...this.props.data.map(({ step_data }) => step_data.length))
  ).keys()
].map(i => (
  <tr key={i}>
    {this.props.data.map(({ step_data, cell_name }) => (
      <td key={cell_name}>{(step_data[i] || {}).name}</td>
    ))}
  </tr>
))}