Question

我无法在Material-UI数据表的每一行中添加按钮我有一个如此呈现的Material-UI数据表

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

我已经将按钮应该放在的变量'actions'列添加到了columns中。行只是我从道具获得的数据对象。如何在每行中添加按钮（用于编辑行）？我尝试映射数据数组，但无法将JSX按钮添加到数据的每个对象中

Answer 1

刚遇到这个。

您需要做的是在列数组中包含一个 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 2

可以。将自定义组件添加到ColDef.renderCell。这是一个示例：

const columns: ColDef[] = [
  { field: "id", headerName: "ID", width: 70 },
  {
    field: "",
    headerName: "Action",
    disableClickEventBubbling: true,
    renderCell: (params: CellParams) => {
      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>;
    }
];

实时演示

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）

如何在材质用户界面表的每一行中添加按钮

3 个答案:

实时演示