從服務器獲取 rowData 時使用 valueGetter 的 Ag-grid React 列移動

Question

每當我從任何服務器獲取數據以將其顯示在 ag-grid 中時，ag-grid 不會維護使用 valueGetter 選擇值並將該列自動放在末尾的列的列順序。

該問題在以下代碼沙箱鏈接中復制： 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"
    }
  },

代碼中的表格想要按以下順序顯示僅有的 4 列：

1. 姓名
2. 公司名稱
3. email
4. 電話

但是，正如您在 CodeSandbox 鏈接中看到的那樣，當使用列定義中的 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