垂直显示的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

根据文档，每个列标题都是一个对象数组，因此传递给它的每个对象都有一个水平显示的标题。 在您的示例中，您仅传递了支持一个对象的列，请尝试使其更像文档示例中所示：

 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'
  }]