React-bootstrap-table2: Disable select row onClick for one column of row

[mirl72]

Hello,

I need to turn off the onClick for row selection on a single column of a row.

One of the columns in my table contain buttons for the user to interact with. I do not want the clicking of these buttons to trigger the select row, but clicking any other column should. (See image below)

Is there a way to achieve this with the latest build?

Thanks!
p.s. I love your table component and have really been able to use it for ALL of my requirements to this point. Great work and please keep it up!

[AllenFang]

@mirl72 I think you can try to call e.stopPropagation() when handling the click event of your custom buttons.

[mirl72]

Perfect, thanks for the speedy response @AllenFang it worked like a charm!

[AllenFang]

👍

[Mvijaysai]

Hello,

I need to turn off the onClick for row selection on a single column of a row.

One of the columns in my table contain buttons for the user to interact with. I do not want the clicking of these buttons to trigger the select row, but clicking any other column should. (See code below)@AllenFang

i do not want edit modal when clicking on other columns except edit column (at last column)
onRowClick = (cell, row) => {
if (row != undefined) {
this.openModal("open", cell);
}
};

[MahiBaghel]

i also having same issue @AllenFang please help with example.

[Tzvetelin88]

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 (index in this case)

onClick: (e, row, rowIndex) => {
    let getCurrentCellIndex = e.target.cellIndex;
    let getLastCellIndex = document.querySelector('table tr:last-child td:last-child').cellIndex

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

Basically this: (getCurrentCellIndex !== getLastCellIndex ) is controlling the current ROW event, but when click on the action button inside the Cell, you do not have cellIndex, so (getCurrentCellIndex !== undefined) is helping here.
In that case you control the hole CELL + the Action Button Inside

[kyou-ennbunn]

👍

how to use e.stopPropagation() in react bootstraap table column?

[Huzaifaahmed20]

in your column in which you don't want event trigger , do this in that column

 events: {
        onClick: (e, column, columnIndex, row, rowIndex) => {
          e.stopPropagation();
        },
},