将数组对象作为表格放置在单元格中：React JS

Question

我试图实现一个表，其中一些数据是由后台接收的对象嵌套的数组，我想把它显示在该列的单元格中，就像一个带有键值对的表格。

 const data = [
      {
        firstName: "Jack",
        status: "Submitted",
        nested: [
          {
            name: "test1",
            value: "NA"
          },
          {
            name: "test2",
            value: "NA"
          }
        ],
        age: "14"
      }
    ];

我能够放置其余的字段(除了嵌套)，我从API接收。谁能帮我把这个对象数组放置在一个单元格内，像表的键值对一样。

我在这个应用程序中使用的是react table v6。

沙盒。https:/codesandbox.iosreact-table-row-table-47192。

希望输出的东西像 show more 如果项目超过2个，然后再切换为 show less

+-----------+-----------+-----+-----------------+
| firstname | status    | age | nested          |
+-----------+-----------+-----+-----------------+
| Jack      | Submitted | 14  | name  value     |
|           |           |     | -----------     |
|           |           |     | test1  NA       |
|           |           |     |                 |
|           |           |     | test2  NA       |
|           |           |     |                 |
|           |           |     |  Show More/Less |
+-----------+-----------+-----+-----------------+
| Simon     | Pending   | 15  | name  value     |
|           |           |     |                 |
|           |           |     | -----------     |
|           |           |     |                 |
|           |           |     | test3  NA       |
|           |           |     |                 |
|           |           |     |                 |
|           |           |     | test4  Go       |
|           |           |     |                 |
|           |           |     | Show More/Less  |
+-----------+-----------+-----+-----------------+

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    const data = [
      {
        firstName: "Jack",
        status: "Submitted",
        nested: [
          {
            name: "test1",
            value: "NA"
          },
          {
            name: "test2",
            value: "NA"
          }
        ],
        age: "14"
      },
      {
        firstName: "Simon",
        status: "Pending",
        nested: [
          {
            name: "test3",
            value: "NA"
          },
          {
            name: "test4",
            value: "Go"
          }
        ],
        age: "15"
      }
    ];
    this.setState({ data });
  };

  getColumns = () => {
    const columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Age",
        accessor: "age"
      },
      {
        Header: "Nested",
        id: "nested",
        accessor: data => {
          let output = [];
          data.nested.map(item => {
            return output.push(item.value);
          });
          return output.join(", ");
        }
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
        />
      </>
    );
  }
}

Answer 1

新编辑：我已经根据评论更新了代码沙盒链接

LastEdit: 如果你想改变外观，可以通过添加 SubComponent 赞成 ReactTable

我已经创建了一个示例沙盒，我在其中添加了 SubComponent

新的Codesandbox链接