как дать кнопки действий в MUIDataTable

Question

Попытка с MUIDataTable с использованием activJS .Мне нужно интегрировать колонку действий.В действии нужно разместить кнопку редактирования и просмотра.Ниже мой код.

Каждая строка с 2 кнопками действий.Редактировать и просматривать, используя реагировать JS.

mui-datatables - {mui-datatables} Dataatables для Material-UI

Код реакции:

/**
 * 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 => {
        /* USER data is received here ! */
        var resultsets = response.data.data.data;
        console.log(resultsets);
        var UsersArray = [];
        for (let i = 0; i < 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 => {
        // 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 => {
                        this.setState({
                          data: response.data
                        });
                        console.log(response);
                      })
                      .catch(error => {
                        // handle error
                        console.log(error);
                      });*/
  }

  render() {
    const columns = [
      "Name",
      "Contact",
      "Email",
      "LastName",
      "User Key",
      "Action"
    ];
    //const action = <Button onClick={Report1.handleClick}>Action</Button>; /* <-- action button */
    const data = this.state.data;
    const options = {
      filterType: "dropdown",
      responsive: "stacked"

      /*  customToolbarSelect: (selectedRows) => <CustomToolbarSelect selectedRows={selectedRows} />*/
    };

    customRender: (index, value, updateValue) => {
      debugger;
      return (
        <a href="/setting/usermanagement/userdetails" title="User details">
          {value}
        </a>
      );
    };
    return (
      <div className="report-view data-table-wrapper">
        <MUIDataTable
          title={"User Listing"}
          data={data}
          columns={columns}
          options={options}
        />
      </div>
    );
  }
}

export default Report1;

Размещение кнопок действий в каждом ряду, спасибо заранее.

Answer 1

Добавьте следующий код рядом с: var userKey = resultsets [i] .user_key;

 var edit        =  <Button onClick={this.handleClick.bind(this,[user_id_title,username_title,firstname_title,lastName_title,email_title,firstname_title,mobile_title,userKey_title,cityname_show,createdon_title,dob_title,gender_title,lastupdateon_title,subcription_enabled_title])}>info</Button>;**