How to customize expanded row that click on save button unselect the row

I have a customized table implementing with react-bootstrap-table. When I click the row, it expands with red highlight on the row. In the expanded row, I can edit fields and save accordingly. I want to close the expanded row on successful save, and remove the red color highlight. Currently, I can successfully save the record and collapse the expanded row, and here is the code: `class ClubsTable extends Component {

constructor(props) {
    super(props);
}

render() {

    const onRowSelect = ({_id}, isSelected) => {
        // add to selectedRow array if selected
        if (isSelected) {
            this.props.selectClub(_id);
        } else {
            // delete from selectedRow array if unselected
            this.props.unSelectClub(_id);
        }
    };

    const options = {
        expandRowBgColor: 'gray-lighter', // background color
        sizePerPageList: [10, 15, 20, 50, 100], // Dropdown Options for rows per page
        sizePerPage: 10,
        sortName: 'club_name',
        sortOrder: 'asc'
    };

    const selectRow = {
        mode: 'checkbox', //radio or checkbox
        className: 'clicked-row', // red color
        clickToSelect: true,
        onSelect: onRowSelect,
        // selected: this.props.selectedClubs
    };

    const isExpandableRow = (row) => {
        // console.log(this.props.closeExpandedRow);
        return (row._id && (_.contains(this.props.selectedClubs, row._id)))
    };

    return (
        <BootstrapTable
            data={ this.props.clubs }
            options={ options }
            selectRow={ selectRow }
            expandableRow={ isExpandableRow }
            expandComponent={ (row) => {return (<ClubDetail club={ row }/>)} }
            exportCSV
            search
            pagination>
            <TableHeaderColumn dataField='club_name' isKey={ true } dataSort={ true }>Club
                Name</TableHeaderColumn>
            <TableHeaderColumn dataField='organization_name' dataSort={ true }>Organization
                Name</TableHeaderColumn>
            <TableHeaderColumn dataField='post_code' dataSort={ true }>Postal Code</TableHeaderColumn>
            <TableHeaderColumn dataField='city' dataSort={ true }>City</TableHeaderColumn>
            <TableHeaderColumn dataField='phone' dataSort={ true }>Phone Number</TableHeaderColumn>
            <TableHeaderColumn dataField='contact_name' dataSort={ true }>Contact Name</TableHeaderColumn>
        </BootstrapTable>
    )
}

}`

However, I could not figure out how to also unselect the row so that the red color would be removed. I think the isSelected is not updated when I programmatically unselect the the row. And also, when I preselect rows with ‘selected: this.props.selectedClubs’, the row color will not be updated.

Any ideas?

[AllenFang]

HI @ZhuQinglei, this is a similar issue that you can check it out.

First, I think you can not expand the row when click on row, because you dont enable clickToExpand in selectRow props.

Second, following is a example:

class ExpandRow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: []
    };
  }

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

  handleSaveBtnClick = id => {
    // unselect row when click save button
    this.setState({ selected: this.state.selected.filter(it => it !== id) });
  }

  expandComponent = row => {
    return (
      <div>
        <button onClick={ () => this.handleSaveBtnClick(row.id) }>Save me</button>
      </div>
    );
  }

  render() {
    const onRowSelect = ({ id }, isSelected) => {
      if (isSelected) {
        this.setState({
          selected: [ ...this.state.selected, id ]
        });
      } else {
        this.setState({ selected: this.state.selected.filter(it => it !== id) });
      }
      return false;  //important
    };

    const selectRowProp = {
      mode: 'checkbox',
      clickToSelect: true,
      clickToExpand: true,   // you should add this to trigger selection and expand both on clicking
      onSelect: onRowSelect,  // manage the selection state
      bgColor: 'red',
      selected: this.state.selected   // set selected as a state data
    };

    const options = {
      expandRowBgColor: 'rgb(242, 255, 163)'
    };
    return (
      <BootstrapTable data={ products }
        options={ options }
        selectRow={ selectRowProp }
        expandableRow={ this.isExpandableRow }
        expandComponent={ this.expandComponent }>
        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

Third, it’s important, the above example can not collapse the row on click save button, I can only unselect the row, I think it’s a enhancement for expand row, user should have the ability to handle which row is expandable just like row selection. so I’ll do it quickly. As I mentioned in #927, expandable row is a new feature, so there’s must be a lots of thing I need to improve, so welcome to tell me if you have any concern.

BTW, you forgot to add react-bootstrap-table css(react-bootstrap-table-all.min.css) into your repo, check the README, because I saw a gap between the header and body(Actually, react-bootstrap-table construct by two different and separated table).

Please let me know if you still have any trouble and I’ll improve expandable row as soon as possible. Thanks

[AllenFang]

@nikodonnell, I’ll add to docs ASAP and let me know if you got some trouble, thanks. but please open another issue and give more detail or example codes, thanks