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

Question

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

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

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

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>;
    }
  },
];

Answer 2

刚刚遇到这个。

您需要做的是在您的列数组中包含一个 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 列中渲染了一个按钮，它将出现在每个填充的行上。

您可以拥有一个从 Material-ui 创建并返回按钮的函数。

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

Answer 3

虽然@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）