私のテーブルは次のとおりです。
<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">✓</span> /
<span className="text-danger">✗</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>
</span>
)
})
return (
<div className="text-center">
{skillHTML}
</div>
)
}
これどうやってするの?