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

  ag-grid, ag-grid-react, javascript, reactjs

Whenever I fetch data from any server to display it in ag-grid, ag-grid does not maintain the column order for the column that uses valueGetter to choose the value and puts that column automatically at the end.

The problem is replicated in the following code sandbox link: https://codesandbox.io/s/ag-grid-column-ordering-bug-bz055 as a minimum reproducible example

The data received from the server is in the following format

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "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"
    }
  },

The table in the code wants to display the only 4 columns in the following order:

  1. name
  2. company.name
  3. email
  4. phone

However, as you can see in the CodeSandbox link, when company name value is retrieved using valueGetter in the column definition, it automatically displays company name as the last column.

How can this be fixed? Any Help will be appreciated?

Note: I can call the ag-grid gridApi or columnApi to reset columns in onGridReady, this fixes it, but it seems like a hack. Is there a better way to accomplish this

Source: Ask Javascript Questions

LEAVE A COMMENT