Material UI 带有嵌套数据的数据网格

Question

如何在 React material UI 数据网格上呈现嵌套的 JSON 数据。在附带的沙箱中，我想显示数据网格上 json 的 phone 用户数量 - Nested JSON Data Grid

Answer 1

为了解决这个问题，让我们看看params 对象传入valueGetter 函数。记录下来，你会在它下面找到一个 row 对象。您应该访问 row 对象，而不是使用 params.getValue()。似乎 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"];
}

我也更新了codesandbox here。

Answer 2

我在我的项目中使用这个：

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

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

Material UI 带有嵌套数据的数据网格

Material UI datagrid with nested data

javascript

json

reactjs

material-ui

react-data-grid