0

私のテーブルは次のとおりです。

<BootstrapTable data={props.workbooks} striped={true} hover={true}>
  <TableHeaderColumn
    dataField="id"
    isKey={true}
    dataAlign="center"
    columnClassName={ props.tdClassFormatter }
    width='50px'>
    ID
  </TableHeaderColumn>
  <TableHeaderColumn dataField="createdAt" width='130px' dataFormat={(cDate) => moment(cDate).format('MMM D, \'YY (h:mm a)')}>Created On</TableHeaderColumn>
  <TableHeaderColumn dataField="status" width='90px' hidden={props.minimized}>Status</TableHeaderColumn>
  <TableHeaderColumn dataField="subject" width='90px' hidden={props.minimized}>Subject</TableHeaderColumn>
  <TableHeaderColumn dataField="results" dataFormat={this.resultsFormatter} dataAlign="center">
    Total /
    <span className="text-info">Attempted</span> /
    <span className="text-success">✓&lt;/span> /
    <span className="text-danger">✗&lt;/span> /
    <span className="text-muted">Skip</span>
  </TableHeaderColumn>
  <TableHeaderColumn dataField="skills" dataFormat={this.skillsFormatter}>Skills</TableHeaderColumn>
  <TableHeaderColumn dataField="id" dataFormat={this.actionFormatter} dataAlign="center" hidden={props.minimized}></TableHeaderColumn>
</BootstrapTable>

そしてthis.skillsFormatter、次のとおりです。

  skillsFormatter(skills) {
    const skillHTML = skills.map((skill, index) => {
      return (
        <span key={index}>
          <Label bsStyle="default">{skill}</Label>&nbsp;
        </span>
      )
    })
    return (
      <div className="text-center">
        {skillHTML}
      </div>
    )
  }

しかし、ラベルを次の代わりに新しい行で改行したい: ここに画像の説明を入力

これどうやってするの?

4

1 に答える 1