reactjs - 如何在 Material ui表中的每一行添加一个按钮

Question

我无法在 Material-UI 数据表的每一行中添加按钮
我有一个 Material-UI 数据表，我像这样渲染

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

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

Answer 1

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

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 70 },
  {
    field: "",
    headerName: "Action",
    disableClickEventBubbling: true,
    renderCell: (params) => {
      const onClick = () => {
        const api: GridApi = params.api;
        const fields = api
          .getAllColumns()
          .map((c) => c.field)
          .filter((c) => c !== "__check__" && !!c);
        const thisRow = {};

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

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

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

现场演示