如何在 MUIDataTable 中提供操作按钮

Question

尝试使用reactJS使用MUIDataTable。我需要集成一个操作栏。在操作中需要放置一个编辑和查看按钮。下面是我的代码。

每行有 2 个操作按钮。使用 React JS 编辑和查看。

mui-datatables -Material-UI 的 {mui-datatables} 数据表

反应代码：

/**
 * 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

您需要customBodyRender在列选项中使用方法，如下所示。

columns={["No", "Name", {
    label: "Actions",
    options: {
        customBodyRender: (value, tableMeta, updateValue) => {
            return (
                <button onClick={() => console.log(value, tableMeta) }>
                    Edit
                </button>
            )
        }
    }
}]}

您可以参考文档和示例。

Answer 2

在旁边添加以下代码： 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>;**