如何为 MUI DataGrid 中的每一行添加一个按钮

Question

我无法在 MUI DataGrid 的每一行中添加一个按钮。我有一个 MUI DataGrid 我这样渲染：

 <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />

我已将按钮所在的列变量“操作”列添加到该列中。行只是我从道具中获得的数据对象。如何在每一行中添加一个按钮（用于编辑行）？我已经尝试映射数据数组，但不可能将 JSX 按钮添加到每个数据对象中。

原文由 Ni Tai 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过覆盖 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>;
    }
  },
];

原文由 NearHuscarl 发布，翻译遵循 CC BY-SA 4.0 许可协议