0

I am using react table v6, I have a button in each row ,on click of button I want to perform some operation and on click of row I need to perform some other operation. I am using getTrProps() component decorator to perform the on click operation on row but after using this the click on button is also considered as a row click and it is performing the operation of row click .

    <ReactTable
     data={rowData}
     sortable={true}
     showPagination={true}
     getTrProps={(state, rowInfo) => {
      if (rowInfo && rowInfo.row) {
        return {
          onClick: e => {
            setState(true);
            setData(rowData[rowInfo.index].shortName);
          }

        };
      } else {
        return {};
      }
    }}
    columns={[
      { Header: "Name", accessor: "displayName" },
      {
        Header: "",

        Cell: (
          <DeleteServiceModel
            btnName={"Delete"}
            comp={"product"}
            size="sm"
            data={""}
            {...props}
          />
        )
      }
    ]}
    defaultPageSize={5}
    className="-striped -highlight"
 />

Here is the table design

ashish
  • 71
  • 1
  • 7
  • Probably the problem with propagation. Check here https://stackoverflow.com/questions/35914680/how-to-call-stoppropagation-in-reactjs – Vova Apr 08 '20 at 07:49

1 Answers1

2

This is because your event is getting propagated.

e.stopPropagation()

to stop the propagation inside the on Click function of your button.

Ashish shetty
  • 163
  • 2
  • 14