如何在表格材料中的tablecell上添加按钮ui

Question

iam am Build nextjs项目并从材料UI创建表，并从mongodb中获取数据。

我想在操作（编辑和删除）列上添加两个按钮，但不知道该如何在材料上进行操作 我希望它看起来像这样，这就是当前表的样子，我需要在有红色标志的地方添加添加按钮。 ：

"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
} from "@mui/material";
import React, { useState } from "react";

const TableAppointment = (props) => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  const columns = [
    { id: "index", name: "#" },
    { id: "name", name: "Nama" },
    { id: "date", name: "Tanggal" },
    { id: "phone", name: "No Telp." },
    { id: "terapist", name: "Terapis" },
    { id: "statust", name: "Status" },
    { id: "action", name: "Action" },
  ];

  return (
    <div>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell key={column.id}>{column.name}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {props.appointment
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, i) => {
                return (
                  <TableRow key={i}>
                    {columns &&
                      columns.map((column, j) => {
                        let value = row[column.id];
                        return (
                          <TableCell key={props.appointment._id}>
                            {value}
                          </TableCell>
                        );
                      })}
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={props.appointment.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    </div>
  );
};

export default TableAppointment;

将此对象添加到您的列数组：

Answer 1

 {
      field: 'fieldName',
      width: 180,
      headerName: 'Column Name',
      renderCell: (params) => <button>{params.row.fieldName}</button>,
 }

您可以尝试这样的东西

Answer 2