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

Question

我正在尝试实现一个 table，其中我从后端收到的一些数据是一个嵌套的对象数组，我想将它显示在该列的单元格中，如 table 键值对

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

我可以放置从 API 收到的其余字段（嵌套字段除外）。有人可以帮助如何将这个对象数组放置在单元格中作为 table 就像键值对

我正在为此应用程序使用 React table v6

沙盒：https://codesandbox.io/s/react-table-row-table-47192

如果项目超过 2，则希望输出类似于 show more，然后是 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

新编辑：我已经根据评论

更新了代码沙箱 link

LastEdit: If you want you can change the look like by adding SubComponent props to the ReactTable

I have created a sample sandbox where I added SubComponent

New Codesandbox link

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

Placing array of objects as a table inside a cell : React JS

javascript

setstate

ecmascript-6

reactjs

react-table