title: How can I prevent the onRowClick when an action button from custombodyrender is clicked?
body: <p>I'm using a mui-datatable where the onRowClick will direct the user to another page. I also have custom action button in each row. However, If i'll click the custom action button, it will also trigger the onRowClick which will direct the user to another page. How can I prevent the onRowClick when clicking the custom action button?</p>
  <pre><code>class orders extends Component {
    constructor() {
      super();
      this.state = { orders: [] };
    }
  
    handleRowClick = (rowData, rowMeta) =&gt; {
      this.props.history.push(&quot;/details&quot;, `${rowData[0]}`);
    };
  
    columns = [
      &quot;Order ID&quot;,
      &quot;Items&quot;,
      &quot;Address&quot;,
      &quot;Total Amount&quot;,
      {
        name: &quot;Action Button&quot;,
        options: {
          filter: true,
          sort: false,
          empty: true,
          customBodyRender: (value, tableMeta) =&gt; {
            return (
              &lt;FormControlLabel
                value={value}
                control={
                  &lt;Button
                    value={value}                &gt;
                    Action Button
                  &lt;/Button&gt;
                }
                onClick={(e) =&gt; {
                  //firestore codes
                }}
              /&gt;
            );
          },
        },
      },
    ];
    options = {
      onRowClick: this.handleRowClick,
    };
  
    render() {
      return this.state.orders ? (
        &lt;div&gt;
          &lt;MUIDataTable
            title={&quot; Orders&quot;}
            columns={this.columns}
            data={this.state.orders}
            options={this.options}
          /&gt;
          
        &lt;/div&gt;
      ) : (
        &lt;p&gt;Loading...&lt;/p&gt;
      );
    }
  }
  export default withRouter(orders);
  </code></pre>