如何向MUI数据网格中的每一行添加按钮 [英] How to add a button to every row in MUI DataGrid

问题描述

我不能将按钮添加到MUI的每一行DataGrid。 我有一个MUIDataGrid，我呈现如下：

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

我已将按钮应该位于的位置添加到Columns变量"Actions"列中。行只是我从道具中得到的一个数据对象。如何将按钮添加到每行(用于编辑该行)？我已尝试映射数据数组，但无法将JSX按钮添加到每个数据对象中。

推荐答案

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

这篇关于如何向MUI数据网格中的每一行添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！