将多个单元格值分隔到行

Question

似乎无法弄清楚如何将我的数组分成单独的行而不是全部出现在同一个单元格中。我有这样的数据结构：

[{Env: "DEV", Members: [John Doe, Jane Smith]}, {Env: "TEST", Members: [Joe Black, Sarah Niu]}]

我在主 table 上显示了 Env，而 Members 显示为子组件。但是，成员都显示在同一个单元格中。有没有办法让它们显示在不同的行中，或者我需要将它们列出来吗？例如[{Env: DEV, Member: John Doe, Env: DEV, Member: Jane Smith}] 当前代码如下：

return (
    <div>
      <ReactTable
         data={this.props.data}
         columns={envColumn}
         className="-striped -highlight"
         defaultPageSize={10}
         SubComponent={row => 
           return (
              <ReactTable
                data={[row.original]}
                columns={memberColumn}
                defaultPageSize={3}
                showPagination={false}
               />
            )
         }}
       />
     </div>
 )

非常感谢任何帮助。

Answer 1

通过对数据使用函数解决：

separateMembers(members) {
        var array = []
        members.forEach((item) => {
            array.push({ Member: item })
        })
        return array;
}

将多个单元格值分隔到行

Separate multiple cell values to rows

react-table