有没有办法在 React table 中合并多列

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) 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} />;
};

这里是 sandbox：

有没有办法在 React table 中合并多列

Is there a way to merge multiple columns in react table

javascript

frontend

reactjs

redux

react-table