title: how to give action buttons in MUIDataTable
body: <p>Trying with <strong>MUIDataTable using reactJS</strong>. I need to integrate an action column. In action need to place an edit and view button. Below is my code.</p>
  
  <p>Each Row with 2 action button. Edit &amp; View using react JS.</p>
  
  <p><a href="https://www.npmjs.com/package/mui-datatables" rel="nofollow noreferrer">mui-datatables</a> - {mui-datatables} Datatables for Material-UI</p>
  
  <p>React Code:</p>
  
  <pre><code>/**
   * Data Table
   */
  import React from "react";
  import MUIDataTable from "mui-datatables";
  import axios from "axios";
  import CustomToolbarSelect from "./CustomToolbarSelect";
  
  // rct card box
  import RctCollapsibleCard from "Components/RctCollapsibleCard/RctCollapsibleCard";
  
  // intl messages
  import IntlMessages from "Util/IntlMessages";
  
  class Report1 extends React.Component {
    constructor(props) {
      super(props);
  
      Report1.handleClick = Report1.handleClick.bind(this);
    }
  
    componentWillMount() {}
  
    /*
     * This function for handle your action button click event
     * if you add action button you can get your own key from array using below command
     * please add indexColumn key to options object.
     */
    static handleClick(e) {
      /* Your code is here.alert is the example */
      alert("parent td#id: " + e.target.parentNode.id);
    }
  
    state = {
      data: []
    };
    componentDidMount() {
      axios
        .get("API_URL", {
          headers: {
            Authorization: `Bearer ${localStorage.authToken}`
          }
        })
        .then(response =&gt; {
          /* USER data is received here ! */
          var resultsets = response.data.data.data;
          console.log(resultsets);
          var UsersArray = [];
          for (let i = 0; i &lt; resultsets.length; i++) {
            var fullName =
              resultsets[i].first_name + " " + resultsets[i].last_name;
            var contactNum = resultsets[i].mobile_number;
            var email = resultsets[i].email;
            var lastName = resultsets[i].last_name;
            var userKey = resultsets[i].user_key;
  
            var UserArray = [];
            UserArray.push(fullName);
            UserArray.push(contactNum);
            UserArray.push(email);
            UserArray.push(lastName);
            UserArray.push(userKey);
  
            UsersArray.push(UserArray);
          }
  
          this.setState({
            data: UsersArray
          });
        })
        .catch(error =&gt; {
          // handle error
          console.log(error);
          if (error.response.status == 401) {
            alert("Authentication Error! Please login again");
          }
        });
  
      /* axios
                        .get("https://jsonblob.com/api/f8ccdc14-2b64-11e9-9b76-6fdc16537d21")
                        .then(response =&gt; {
                          this.setState({
                            data: response.data
                          });
                          console.log(response);
                        })
                        .catch(error =&gt; {
                          // handle error
                          console.log(error);
                        });*/
    }
  
    render() {
      const columns = [
        "Name",
        "Contact",
        "Email",
        "LastName",
        "User Key",
        "Action"
      ];
      //const action = &lt;Button onClick={Report1.handleClick}&gt;Action&lt;/Button&gt;; /* &lt;-- action button */
      const data = this.state.data;
      const options = {
        filterType: "dropdown",
        responsive: "stacked"
  
        /*  customToolbarSelect: (selectedRows) =&gt; &lt;CustomToolbarSelect selectedRows={selectedRows} /&gt;*/
      };
  
      customRender: (index, value, updateValue) =&gt; {
        debugger;
        return (
          &lt;a href="/setting/usermanagement/userdetails" title="User details"&gt;
            {value}
          &lt;/a&gt;
        );
      };
      return (
        &lt;div className="report-view data-table-wrapper"&gt;
          &lt;MUIDataTable
            title={"User Listing"}
            data={data}
            columns={columns}
            options={options}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Report1;
  </code></pre>
  
  <p>Placing action buttons in each row, Thanks in Advance.</p>