Change style of row when it is expanded

[vicrec]

Hello, is there a way to change the style of an expanded row? I would achieve this: when row is expanded, the text/background of cells would be bold.

Thanks.

[AllenFang]

@vicrec so far we don't have this feature, but i think I can implement it soon.

However, if you can't wait, here is a workaround:

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

  handleOnExpand = (row, isExpand, rowIndex, e) => {
    if (isExpand) {
      this.setState(() => ({
        expanded: [...this.state.expanded, row.id]
      }));
    } else {
      this.setState(() => ({
        expanded: this.state.expanded.filter(x => x !== row.id)
      }));
    }
  }

  render() {
    const expandRow = {
      renderer: row => (...),
      expanded: this.state.expanded,
      onExpand: this.handleOnExpand
    };
    const rowStyle = (row, rowIndex) => {
      const style = {};
      if (this.state.expanded.find(id => row.id === id)) {
        style.backgroundColor = 'red';
      }
      return style;
    };
    return (
      <div>
        <BootstrapTable
          keyField="id"
          data={ products }
          columns={ columns }
          expandRow={ expandRow }
          rowStyle={ rowStyle }
        />
      </div>
    );
  }
}

[AllenFang]

upgrade to newest version and you can use expandRow.parentClassName
https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-expand-props.html#expandrowparentclassname-string-function