从服务器获取 rowData 时使用 valueGetter 的 Ag-grid React 列移位

Question

每当我从任何服务器获取数据以在 ag-grid 中显示它时，ag-grid 不会维护使用 valueGetter 选择值的列的列顺序，并自动将该列放在末尾。

问题在以下代码沙箱中重现link：https://codesandbox.io/s/ag-grid-column-ordering-bug-bz055作为最小可重现示例

从服务器接收到的数据格式如下

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },

代码中的table要按以下顺序显示仅有的4列：

名字
company.name
电子邮件
phone

但是，正如您在 CodeSandbox link 中看到的那样，当在列定义中使用 valueGetter 检索 company name 值时，它会自动将 company name 显示为最后一列。

如何解决这个问题？任何帮助将不胜感激？

注意：我可以调用 ag-grid gridApi 或 columnApi 来重置 onGridReady 中的列，这修复了它，但它看起来像是 hack。有没有更好的方法来完成这个

Answer 1

由于该列没有提供 field，我建议向该列提供 field 或 colID。这将是最简单的方法，无需使用任何 API 调用来移动列：

    {
      // use either or both
      colId: "companyName",
      // field: "comapnyName",
      headerName: "Company Name",
      valueGetter: (params) => {
        return params.data.company?.name;
      }
    }

我已经分叉了你的示例：https://codesandbox.io/s/ag-grid-column-ordering-bug-forked-62ph3?file=/src/App.js

从服务器获取 rowData 时使用 valueGetter 的 Ag-grid React 列移位

Ag-grid React column shifts that uses valueGetter when rowData fetched from server

javascript

reactjs

ag-grid

ag-grid-react