带有嵌套数据的材质 UI 数据网格

Question

如何在 React Material UI 数据网格上渲染嵌套的 JSON 数据。在附加的沙箱中，我想从数据网格上的 json 显示用户的电话号码 - 嵌套 JSON 数据网格

Answer 1

我在我的项目中使用它：

{ 
    field: 'idMaintenancePlan',
    headerName: 'Plan de maintenance', 
    sortable: false, width: 200, 
    valueGetter: (params) => params.row?.maintenancePlan?.name 
}

Answer 2

为了解决这个问题，让我们看看在

params

函数中传递的

valueGetter

对象。记录下来，你会在它下面发现一个

row

物体。您应该访问

params.getValue()

对象，而不是使用

row

。看来

params.getValue()

只能用在一级JSON对象上。这是输出

phone

字段的代码片段。

  {
    field: "phone",
    headerName: "Phone",
    width: 160,
    valueGetter: (params) => {
      console.log({ params });
      let result = [];
      if (params.row.phone) {
        if (params.row.phone.home) {
          result.push("home: " + params.row.phone.home);
        }
        if (params.row.phone.office) {
          result.push("office: " + params.row.phone.office);
        }
      } else {
        result = ["Unknown"];
      }
      return result.join(", ");
    }
  }

更新

为了更灵活地检查对象下的每个键是否存在，我创建了一个辅助方法：

const checkKeysUnderObject = (obj, result) => {
  for (let key in obj) {
    if (key) { // push the value to the result array only if key exists
      result.push(key + ": " + obj[key]);
    }
  }
};

辅助方法的使用：

if (params.row.phone) {
  checkKeysUnderObject(params.row.phone, result);
}else{
  result = ["Unknown"];
}

我还更新了代码和框这里。

Answer 3

这对我来说效果很好

{ field: 'parserInfo', headerName: 'Parser Title', valueFormatter: ({ value }) => value.title }

Answer 4

这也很好用

{
     field: "family",
     headerName: "Family",
     width: 150,
     renderCell: (params) => {
       return <div className="rowitem">{params.row.family.name}</div>;
     },
},

Answer 5

这个对我有用：

const columns = [
    { 
        field: "post", 
        headerName: "TITLE", 
        valueFormatter: (post: any) => post.value.title
    }
]

在我的例子中，

post

是

tutorial

实体的属性。

<DataGrid
    rows={tutorials}
    columns={columns}
    slots={{
        toolbar: GridToolbar,
    }}
/>

Tutorial

实体

export interface Tutorial {
    id: number;

    ...

    post: Post;
}

...以及

Post

实体。

export interface Post {
    id: number;
    title: string;

    ...
}

Answer 6

DataGrid 中的签名发生了一些变化

v7

。

row

现在是第二个参数。

{
  field: 'distributorName',
  headerName: 'Distributor',
  valueGetter: (_, row) => row.distributor.fullName,
}