将多个数据添加到react-table中的列

时间:2018-03-29 19:04:13

标签: reactjs react-table

我有一个使用react-table的表,但是对于其中一个列,我想显示两个数据 - 名称和描述。

read.csv

如果访问者是data.table::fread,我想在“产品”列中显示名称和描述(我将它们设置为使用不同的字体大小进行堆叠)。

我尝试使用该列的getInitialState(){ return { data: [{ id: 1, keyword: 'Example Keyword', product: [ name: 'Red Shoe', description: 'This is a red shoe.' ] },{ id: 2, keyword: 'Second Example Keyword', product: [ name: 'blue shirt', description: 'This is a blue shirt.' ] }] } }, render(){ const { data } = this.state; return ( <div className="app-body"> <ReactTable data={data} columns={[{ columns: [{ Header: 'Id', accessor: id, show: false }, { Header: 'Keyword', accessor: 'keyword' }, { Header: 'Product', accessor: 'product' // <<< here }] }]} defaultPageSize={10} className="-highlight" /> </div> ) } 属性,并认为我也可以尝试调用一个函数来解决它,但我两次都遇到了错误。

任何想法如何做到这一点?

1 个答案:

答案 0 :(得分:4)

确实你应该使用Cell这样:

getInitialState(){
  return {
    data: [
      {
        id: 1,
        keyword: 'Example Keyword',
        product: [
          name: 'Red Shoe',
    description: 'This is a red shoe.'
]
},{
    id: 2,
      keyword: 'Second Example Keyword',
      product: [
      name: 'blue shirt',
      description: 'This is a blue shirt.'
  ]
  }]
}
},
render(){
  const { data } = this.state;

  return (
    <div className="app-body">
      <ReactTable
        data={data}
        columns={[{
          columns: [{
            Header: 'Id',
            accessor: id,
            show: false
          }, {
            Header: 'Keyword',
            accessor: 'keyword'
          }, {
            Header: 'Product',
            accessor: 'product',
            Cell: row => {
              return (
                <div>
                  <span className="class-for-name">{row.row.product.name}</span>
                  <span className="class-for-description">{row.row.product.description}</span>
                </div>
              )
            }
          }]
        }]}
        defaultPageSize={10}
        className="-highlight"
      />
    </div>

  )
}

我发现的另一件事是产品属性应该是一个对象而不是一个数组,所以改变这个:

product: [
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        ]

到此:

product: {
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        }