Changing the entire column content color on Header column click event

[sridhar-v9]

Hi Team,

I would like to change the entire column content color when ever the user clicks on respective column header.

if we can achieve with headerEvents then how i can trigger entire table to render

Please suggest/show me the direction to achieve the above requirement.

Thanks in advance.

Regards,
Sridhar.V

[AllenFang]

@sridhar-v9

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [{
        dataField: 'id',
        text: 'Product ID',
        style: {
          backgroundColor: 'white'
        },
        headerEvents: {
          onClick: this.handleHeaderClick
        }
      }, {
        dataField: 'name',
        text: 'Product Name'
      }, {
        dataField: 'price',
        text: 'Product Price'
      }]
    };
  }

  handleHeaderClick = (_a, _b, columnIndex) => {
    const newcolumns = this.state.columns.map((column, i) => {
      if (i === columnIndex) {
        return {
          ...column,
          style: {
            ...column.style,
            backgroundColor: 'pink'
          }
        };
      }
      return { ...column };
    });
    this.setState({ columns: newcolumns });
  }

  render() {
    return (
      <div>
        <h3>Try to Click on Product ID header column</h3>
        <BootstrapTable keyField="id" data={ products } columns={ this.state.columns } />
      </div>
    );
  }
}