我们可以在react数据表组件的一列下使用两个选择器吗？

Question

我正在使用react数据表组件，我想在一个标题下显示2个字段。但问题是我不知道使用react-data-table-component的正确方法，react-data-table-component的指令没有包含这样的例子。

所以我想知道我们是否可以在一列下使用两个选择器。

下面是我的代码：

{
  name:<div style={{ cursor: 'context-menu' , marginRight:'80px'}}>Implementation</div>,
  selector: 'ImplementationStatus',
  selector: 'DoneDate',

  ignoreRowClick: true,
  cell: row => (
  <div>
  <div style={{display: 'inline-block',marginRight:'10px',color:row.ImplementationStatus == 0 ? "red" : (row.ImplementationStatus == 1 ? "#fe9810" : (row.ImplementationStatus == 2 ? "green" : "black"))}}>{row.ImplementationStatus == 0 ? <div style={{marginRight:'5px'}}>NOT STARTED</div> : (row.ImplementationStatus == 1 ? <div style={{marginRight:'20px'}}>UNDERWAY</div> : (row.ImplementationStatus == 2 ? "IMPLEMENTED" : ""))}</div>
  
    <div className="align-middle text-center" style={{display: 'inline-block',paddingLeft:'0px'}}>
      <Input style={{ width: '167px',fontSize:'15px', height: '30px',backgroundColor:this.state.isManager === true || this.state.isAdmin===true ?'#FFFFFF':'#DCDCDC'}}
        type="date"
        readOnly={this.state.isManager === true || this.state.isAdmin === true ? false : true}
        placeholder="Enter Done Date"
        value={row.DoneDateVendorDisplay == null ? "2020-01-01" : row.DoneDateVendorDisplay}
        min="2020-01-01"
        max={currentDate}
      /></div>
      </div>
  ),
  center: true,
  width: 'auto',
},

Answer 1

列API的选择器属性可以是字符串或函数。在下面的示例中，我将"firstName“和"lastName”组合在一起以生成"name“列

<DataTable
  columns={[
    {
      name: 'Name',
      selector: row => `${ row.firstName } ${ row.lastName }`
    },
    {
      name: 'Business Number',
      selector: 'businessNumber'
    },
    {
      name: 'Type',
      selector: 'type'
    }
  ]}
/>