CODEWITHSUNDEEP
javascriptreactjs
Alyssa
Alyssa

Reputation: 153

Exclude single column in row event

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.

Upvotes: 2

Views: 762

Answers (1)

Tsvetelin
Tsvetelin

Reputation: 261

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}`)
      }
}

Upvotes: 0

Related Questions