React-Table 列标题垂直显示

Question

我正在使用 React-Table 模块来创建一个表。到目前为止，我有以下内容：

<div>
    <ReactTable
    columns={[{columns :
        [{
          Header: "Time",
          accessor: "time", //name of field in table
        },
        {
          Header: "Weight",
          accessor: "weight",
        }
      ]}]}
    />
</div>

但是，我的列标题垂直显示如下：

时间

重量

我希望它们按预期水平显示。

Answer 1

根据documentation，每个列标题都是一个对象数组，因此您传递给它的每个对象都会有一个水平显示的标题。在您的示例中，您只传递了 columns 支持一个对象，尝试将其安排得更像文档示例：

 const columns = [{
        Header: 'Name',
        accessor: 'name' // String-based value accessors!
      }, {
        Header: 'Age',
        accessor: 'age',
        Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
      }, {
        id: 'friendName', // Required because our accessor is not a string
        Header: 'Friend Name',
        accessor: d => d.friend.name // Custom value accessors!
      }, {
        Header: props => <span>Friend Age</span>, // Custom header components!
        a

ccessor: 'friend.age'
  }]