有没有办法在反应表中合并多列？

Question

我有一个数据数组为。

data = [ {date: "16/05/2020", value: [ {column: "student", count: 10, value: "abcd" }, 
         {column: "teacher", count: 25, value: "pqrs" }] },
         {date: "17/05/2020", value: [ {column: "student", count: 19, value: "mno" }, 
         {column: "teacher", count: 7, value: "xyz" }] }
        ];

这是列数组。

columns = [{ Header: "Date", accessor: "date"}, 
           { Header: "Column", accessor: "column"},
           { Header: "Count", accessor: "count"},
           { Header: "Value", accessor: "value"}
           ]

我想显示的数据就像图片中提到的那样(桌子)中的React Table。

在render()里面，我是这样做的。

              <ReactTable
                data={data}
                columns={columns}
                minRows={0}
                defaultPageSize={25}
              />

善意的，帮助。

先谢谢你！！！！！！！！！！！！！！！！！！！！！）。

Answer 1

你需要使用 accessor 进入属性，从 data并自定义单元格。

试试这个。

const data = [
  {
    date: "16/05/2020",
    value: [
      { column: "student", count: 10, value: "abcd" },
      { column: "teacher", count: 25, value: "pqrs" }
    ]
  },
  {
    date: "17/05/2020",
    value: [
      { column: "student", count: 19, value: "mno" },
      { column: "teacher", count: 7, value: "xyz" }
    ]
  }
];

const columns = [
  {
    Header: "Date",
    id: "date",
    accessor: d => (
      <div className="wrapper">
        <div>{d.date}</div>
        <div>{d.date}</div>
      </div>
    )
  },
  {
    Header: "Column",
    id: "column",
    accessor: d => (
      <div className="wrapper">
        <div>{d.value[0].column}</div>
        <div>{d.value[1].column}</div>
      </div>
    )
  },
  {
    Header: "Count",
    id: "count",
    accessor: d => (
      <div className="wrapper">
        <div>{d.value[0].count}</div>
        <div>{d.value[1].count}</div>
      </div>
    )
  },
  {
    Header: "Value",
    id: "value",
    accessor: d => (
      <div className="wrapper">
        <div>{d.value[0].value}</div>
        <div>{d.value[1].value}</div>
      </div>
    )
  }
];

const App = () => {
  return <ReactTable data={data} columns={columns} />;
};

这里是一个 沙盒: