3

我正在寻找一种更新单个行条目的有效方法。

我的方法似乎行不通。补充一下,我正在从 redux 状态获取数据。我正在考虑使用弹出模式,但我希望实现一种更有效的方式。

// action
import { HrEmployeeData } from "../../actions/employeeHR";



const EmployeeTable = (props) => {

  useEffect(() => {
    props.HrEmployeeData();
  }, []);

  const classes = useStyles();

  const columns = [
    { name: "name", label: "Name" },
    { name: "phone_no", label: "Contact" },
    { name: "email", label: "Email" },
    { name: "department", label: "Department" },
    { name: "job_title", label: "Title" },
    { name: "salary", label: "Salary" },
    { name: "date_employed", label: "Date Employed" },
    {
      name: "Action",
      options: {
        filter: true,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <button
              onClick={() =>
                window.alert(`Clicked "Edit" for row ${value}`)
              }
            >
              Edit
            </button>
          );
        },
      },
    },
  ];

return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <MUIDataTable
              title={"Employees Records"}
              data={props.employeesDetail}
              columns={columns}
              options={options}
            />
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};
export default connect(mapStateToProps, { HrEmployeeData })(EmployeeTable);
4

0 回答 0