Column Width does not work when header grouping

Hello everyone,

Just encountered a bug, when trying to assign some width to the last TableHeaderColumn of my table.

My code:

const daysCalendarColumns = [];
    this.state.colMap.forEach(column => {
      daysCalendarColumns.push(<TableHeaderColumn columnClassName="headerDayNumCol" key={'up_' + column.colDataField} row="0" dataAlign="center">{column.colDayNumber}</TableHeaderColumn>);
      daysCalendarColumns.push(<TableHeaderColumn columnClassName={this.getDayColumnStyle(column.colDayName)} key={'dwn_' + column.colDataField} row="1" customEditor={{getElement: createLoadEditor, customEditorParameters: {dataField: column.colDataField}}} dataField={column.colDataField} dataAlign="center">{column.colDayName}</TableHeaderColumn>);
    });

    return (
      <div style={divStyle}>
        <BootstrapTable data={crasData} cellEdit={cellEditProp} hover tableStyle={{fontSize: 'x-small'}} trClassName={this.getRowClassName}>
          <TableHeaderColumn row="0" rowSpan="2" columnClassName="mainLabelCol" isKey key="mainLabel" dataField="mainLabel" width="140px" editable={false} thStyle={{borderRight: 0}}/>
          <TableHeaderColumn row="0" rowSpan="2" columnClassName="addLabelCol" key="addLabel" dataField="addLabel" width="90px" editable={false} thStyle={{borderLeft: 0}}/>

          {daysCalendarColumns}

          <TableHeaderColumn row="0" rowSpan="2" columnClassName="totalOnRowsCol" key="totalOnRow" dataField="totalLoadOnRow" width="40px" editable={false} dataAlign="right">TOTAL</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );

I have some grouped headers standing for day names and nomber of the month. When I try to pu the width on the last column, i got the following error:

Uncaught TypeError: Cannot read property ‘style’ of undefined

This comes from webpack:///./~/react-bootstrap-table/lib/BootstrapTable.js @ 1431:

else { _react2.default.Children.forEach(this.props.children, function (child, i) { if (child.props.width) { header[i].style.width = child.props.width + 'px'; header[i].style.minWidth = child.props.width + 'px'; } }); }

Where it seems that this.props.children sees 65 children (yes, 2 main columns header, plus 31 days times 2 plus last TOTAL column) but there are only 35 “header” (var header = this.refs.header.getHeaderColGrouop()😉

Anyone had the same ?

[ThomasVuillaume]

Yes of course, no problem !

My solution was simply to put some classNames :

const theCalendarColumns = [];
    theCalendarColumns.push(<TableHeaderColumn row="0" rowSpan="2" columnClassName="mainLabelCol" isKey key="mainLabel" dataField="mainLabel" editable={false} thStyle={{borderRight: 0}}/>);
    theCalendarColumns.push(<TableHeaderColumn row="0" rowSpan="2" columnClassName="addLabelCol" key="addLabel" dataField="addLabel" editable={false} thStyle={{borderLeft: 0}}/>);
    this.state.colMap.forEach(column => {
      theCalendarColumns.push(<TableHeaderColumn columnClassName="headerDayNumCol" key={'up_' + column.colDataField} row="0" col={2 + column.colDayNumber - 1} dataAlign="center">{column.colDayNumber}</TableHeaderColumn>);
      theCalendarColumns.push(<TableHeaderColumn columnClassName={this.getDayColumnStyle(column.colDayName)} key={'dwn_' + column.colDataField} row="1" col={2 + column.colDayNumber - 1} customEditor={{getElement: createLoadEditor, customEditorParameters: {dataField: column.colDataField}}} dataField={column.colDataField} dataAlign="center" editable={editState}>{column.colDayName}</TableHeaderColumn>);
    });
    theCalendarColumns.push(<TableHeaderColumn row="0" rowSpan="2" columnClassName="totalOnRowsCol" key="totalOnRow" dataField="totalLoadOnRow" editable={false} dataAlign="right">TOTAL</TableHeaderColumn>);

(sorry for that ugly paste)

and some SCSS on top of that, especially what is important here is the combination of width+min-width as I said before:

/* Var for this file */
$total-row-col-thick: 45px;
$cell-padding: 4px;

/* >>>> SPECIAL COLUMNS STYLING */
/* Special background for columns containing weekend days */
.weDayCol{
background-color: rgb(217, 217, 217);
}

/* Main column in bold */
.mainLabelCol{
font-weight: bold;
width: 160px;
min-width: 160px;
}

/* Additional label in Italic */
.addLabelCol{
font-style: italic;
width: 150px;
}

.totalOnRowsCol{
width: $total-row-col-thick;
min-width: $total-row-col-thick;
font-weight: bold;
}

[AllenFang]

Fixed on v3.4.0, let me know if the problem still remain, thanks