您可以通过重写GridColDef.renderCell方法来添加自定义组件，并返回您想要的任何元素。
下面的示例显示了一个操作列，该列在每行中呈现一个按钮。当点击按钮时，它会提醒json字符串中的当前行数据：

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 70 },
  {
    field: "action",
    headerName: "Action",
    sortable: false,
    renderCell: (params) => {
      const onClick = (e) => {
        e.stopPropagation(); // don't select this row after clicking

        const api: GridApi = params.api;
        const thisRow: Record<string, GridCellValue> = {};

        api
          .getAllColumns()
          .filter((c) => c.field !== "__check__" && !!c)
          .forEach(
            (c) => (thisRow[c.field] = params.getValue(params.id, c.field))
          );

        return alert(JSON.stringify(thisRow, null, 4));
      };

      return <Button onClick={onClick}>Click</Button>;
    }
  },
];

刚发现这个。
您需要做的是在列数组中包含renderCell方法。

const columns = [
    {
        field: 'col1',
        headerName: 'Name 1',
        width: 150,
        disableClickEventBubbling: true,
    },
    {
        field: 'col2',
        headerName: 'Name 2',
        width: 300,
        disableClickEventBubbling: true,
    },
    {
        field: 'col3',
        headerName: 'Name 3',
        width: 300,
        disableClickEventBubbling: true,
    },
    {
        field: 'col4',
        headerName: 'Name 4',
        width: 100,
        disableClickEventBubbling: true,
    },
    {
        field: 'col5',
        headerName: 'Name 5',
        width: 150,
        ***renderCell: renderSummaryDownloadButton,***
        disableClickEventBubbling: true,
    },
    {
        field: 'col6',
        headerName: 'Name 6',
        width: 150,
        ***renderCell: renderDetailsButton,***
        disableClickEventBubbling: true,
    },
]

在上面我在第5和第6列中呈现了一个Button，它将出现在每个填充的行上。
在此基础上，您可以使用一个函数来创建并返回Material-ui中的Button。

const renderDetailsButton = (params) => {
        return (
            <strong>
                <Button
                    variant="contained"
                    color="primary"
                    size="small"
                    style={{ marginLeft: 16 }}
                    onClick={() => {
                        parseName(params.row.col6)
                    }}
                >
                    More Info
                </Button>
            </strong>
        )
    }

根据MUI X v5params.getValue方法已弃用，并将在下一个主版本中删除，您可以从params.row访问当前行数据。

{
  field: 'action',
  headerName: 'Action',
  width: 180,
  sortable: false,
  disableClickEventBubbling: true,
  
  renderCell: (params) => {
      const onClick = (e) => {
        const currentRow = params.row;
        return alert(JSON.stringify(currentRow, null, 4));
      };
      
      return (
        <Stack direction="row" spacing={2}>
          <Button variant="outlined" color="warning" size="small" onClick={onClick}>Edit</Button>
          <Button variant="outlined" color="error" size="small" onClick={onClick}>Delete</Button>
        </Stack>
      );
  },
}

虽然@NearHuscarl的回答完美地回答了这个问题，但我想发布一个TypeScript示例：

const onClick = () => {
    const api: GridApi = params.api;
    const fields = api
      .getAllColumns()
      .map((c) => c.field)
      .filter((c) => c !== "__check__" && !!c);
    const thisRow: any = {};

    fields.forEach((f) => {
      thisRow[f] = params.getValue(params.id, f);
    });

    return alert(JSON.stringify(thisRow, null, 4));
  };

  return <Button onClick={onClick}>Click</Button>;

另外请注意，我更改了getValue调用。（包括行ID）

当前投票最多的答案在v5中已经过时，因为new GridRowParams interface包含实际行作为参数，使得从GridApi进行手动筛选变得不必要和不实用。
将其与renderCell一起使用可以简单到

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 70 },
  {
    field: "action",
    headerName: "Action",
    sortable: false,
    renderCell: ({ row }: Partial<GridRowParams>) =>
      <Button onClick={() => yourActionFunction(row)}>
        Action
      </Button>,
  },
]

在TypeScript或

const columns = [
  { field: "id", headerName: "ID", width: 70 },
  {
    field: "action",
    headerName: "Action",
    sortable: false,
    renderCell: ({ row }) =>
      <Button onClick={() => yourActionFunction(row)}>
        Action
      </Button>,
  },
]

在纯JavaScript中。