Exclude single column in row event

user_9499922 0
Viewed 444

I'm using React-Bootstrap-Table-2 and using their rowEvents function to make the rows clickable to go to another page. However, I need ONE of the columns to be excluded from that row event because it has a "status" switch on it and the onClick function takes precedence over the switch so i can't toggle it anymore.

I've tried using columnIndex, but I'm not sure how I would implement it to be removed from the row event. Example: I have five columns, I only want that row event to span 4 of those columns and not the last one. 

  const rowEvents = {
      onClick: (e, row, rowIndex) => {
        this.handleOfferSelection(row);
      },
      onMouseEnter: (e, row, rowIndex) => {
        this.setState({ activeRow: rowIndex });
      }
    };

// Table
    <BootstrapTable
                      {...props.baseProps}
                      pagination={paginationFactory()}
                      rowEvents={rowEvents}
                      rowStyle={rowStyle}
                    />

I just need the last column to be totally excluded from the row event.

reactjs javascript
1 Answers
onClick: (e, row, rowIndex) => {
    let getCurrentCellIndex = e.target.cellIndex;
    let getLastCellIndex = document.querySelector('table tr:last-child td:last-child').cellIndex
      // As this event is for the hole ROW, we need to exclude last one, as we have different events there. You can exclude no matter which one, even pass it as parameter.

      if (getCurrentCellIndex !== getLastCellIndex && getCurrentCellIndex !== undefined) {
        console.log(`----> ${JSON.stringify(row)} |||| ${rowIndex}`)
      }
}
user_37018120
Related