Creating onClick event in getTdProps or getTrProps overrides Expander functionality in reactTable

[srenitha]

            1.If I create an Expander column for my table and then add  getTdProps={this.onRowClick} 
            to the table, the expander is never opened. Can you please help with the issue

             2.I have used stopPropagation() still error

 onRowClick = (state, rowInfo, column, instance) => {
return {
  onClick: e => {
    e.stopPropagation();
    if (

      e.target.type == "submit"

    ) {
      alert(rowInfo.original.name)
    }
    // console.log(e.target.type, rowInfo)
  }
}

  }
   render() {
return (
  <div>
    <ReactTable
      filterable
      getTdProps={this.onRowClick}
      data={this.state.users}
      defaultPageSize={10}
      resizable={false}
      minRows={1}

      //onClickHandler={this.state.name}
      pageSize={8}
      style={{
        "borderWidth": "1px", 'borderColor': "#000", 'borderStyle': 'solid', " borderRight": "1px solid red"
      }}
      showPageSizeOptions={false}
      expandedRows={true}


      columns={
        [
          {
            Header: "Name",
            accessor: "name",
            className: "Name",

          },
          {
            Header: "Ipv4Address",
            accessor: "ipv4Address"
          },
          {
            Header: "Ipv6Address",
            accessor: "ipv6Address"
          },
          {
            Header: "Ping Status",
            accessor: "isAlive",
            Cell: (row) => {
              row.styles["color"] = "#fff";
              row.styles["backgroundColor"] = row.value === "True" ? "green" : "red";
              return row.value.toUpperCase();
            }
          },
          {
            Header: "HostStatus",
            accessor: "hostStatus",
            Cell: (row) => {
              row.styles["color"] = "#fff";
              row.styles["backgroundColor"] = this.getColor(row.value);
              return row.value.toUpperCase();
            }
          },
          {
            Header: "Last Updated",
            accessor: "lastUpdated"
          },
          {
            Header: "Button",
            accessor: "Button",
            Cell: ({ row }) => (
              <button>
                Detailed View
              </button>
            )

          },
        ]}

      SubComponent={subComponent}
    />
    <br />

  </div>
);

}
``

[riteshnahar]

Change the method getTdProps to getTrProps. And remove e.stopPropagation(); from onRowClick method.

[srenitha]

It worked. Thanks