expand by column: expandable={false} not working while column is custom format

click the cell with button or badge still can expand the row

settingFormatter(cell, row){
    return (
      <span>
        <Button role='button' className="btn btn-outline-info" onClick={() => this.props.loadOffSideBar(true, ACT_TYPE_EDIT, row.id, row.name, row.text)} ><FontAwesome name='pencil' /></Button>
        <Button role='button' className="btn btn-outline-danger ml-3" onClick={() => this.props.deleteEvent(row)} ><FontAwesome name='times' /></Button>
      </span>
    );
  }
  statusFormatter(cell, row){
    return (
      <span>
        {row.isPublish ?
          <Badge color='success' className="p-2">Published</Badge>:
          <Badge color='warning' className="p-2">Draft</Badge>
        }
      </span>
    );
  }
<TableHeaderColumn dataField="status" dataAlign="center" expandable={ false } dataFormat={this.statusFormatter}>
                Status
              </TableHeaderColumn>
              <TableHeaderColumn dataField="setting" dataAlign="center" expandable={ false } dataFormat={this.settingFormatter}>
                {this.renderCustomHeader()}
              </TableHeaderColumn>

[Fenicio]

Hi, I just reproduced this error and found out why it’s happening.

In TableRow, on the rowClick method, when it’s attempting to get the cellIndex (Line 16 as of now) if the dataFormat adds another html tag, a div, a span or whatever, when it tries to find the cellIndex is going to return undefined.

One possible solution would be to loop back through the .parentNode of the e.target to get the first td element, and then get the cellIndex of that.

[SagaGG]

@AllenFang @Fenicio Thank you guys, good job. sorry for looking into it late