Wrong column expanding row

[PaulConwayArk]

Hi there,

I am having an issue with having both expanded rows and select rows in my table. When I have the "hideSelectColumn" set to true and the "expandColumnVisible" is to true, there is an issue with the first column, of data not the expand button column, as it seems to be an event to expand the row, even if the TableHeaderColumn has the option "expandable" set to false. Below is some code to reproduce the error:

export default class ExpandRow extends React.Component {
constructor(props) {
super(props);
this.handleRowSelect = this.handleRowSelect.bind(this);
}

isExpandableRow(row) {
  if (row.id < 3) return true;
  else return false;
}

handleRowSelect(row, isSelected, e) {
  e.preventDefault()
}

expandComponent(row) {
  return (
    <BSTable data={ row.expand } />
  );
}

render() {
  return (
    <BootstrapTable data={ products }
      options={{expandRowBgColor: 'rgb(242, 255, 163)',  expandBy: 'column'}}
      expandableRow={this.isExpandableRow}
      expandComponent={this.expandComponent}
      expandColumnOptions={{expandColumnVisible: true, expandColumnBeforeSelectColumn: false}}
      selectRow={{ mode: 'checkbox',  bgColor: 'pink', hideSelectColumn: true, clickToSelectAndEditCell: true, clickToExpand: this.handleRowSelect }}
      search>
      <TableHeaderColumn dataField='id' expandable={ false } isKey={ true }>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField='name' expandable={ false }>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField='price' expandable={ false }>Product Price</TableHeaderColumn>
    </BootstrapTable>
  );
}

}

Any thoughts of how to handle this issue? Much appreciated

[AllenFang]

@PaulConwayArk, sorry for lately reply, I'll check it out

[AllenFang]

Hello @PaulConwayArk, I wanna confirm this issue to you, the problem is that first column(Product ID) can trigger expanding via clicking even if the expandable was false? I think it's a bug.

BTW, you assign a function to selectRow.clickToExpand, it's invalid configuration, it only accept bool value. And for your example, I think you configure the selectRow is meaningless, due to you hide the selection column and doesn't handle any selection event.

[PaulConwayArk]

Hi, thanks for taking the time to take a look!

Yes that is the issue I was regarding to with the first column.

With regards the selectRow, how would I go about having an expanded column visible, and a hidden select column, while only having the expanded column trigger the expanding of the row. Through the selectRow.clickToExpand either set to true or false, this behaviour doesn't happen, you can test it in my example to get a better idea of what I'm on about.

Is there another setting that I am missing to handle this maybe?

[AllenFang]

ok, let me explain selectRow.clickToExpand to you, you may notice clickToExpand in a property in selectRow, actually, there's a selectRow.clickToSelect props to tell react-bootstrap-table to trigger selection by clicking or not. but when you mix select and expand on one table, there's will be a problems

because click row is the default way to trigger expand, but if you also configure the select selectRow.clickToSelect, the click row event will only trigger select, so selectRow.clickToExpand is tell react-bootstrap-table, when selectRow.clickToSelect was true, you want to trigger expand also. and it only works on options. expandBy is row, but in your case, you are by column.

Hope you can understand what I said :)

[AllenFang]

@PaulConwayArk, sorry for lately fixing, this bug was fixed on v3.4.0, thanks