ag-grid not respecting column order of columns set in ColumnDefinitions

Question

According to ag-grid, the column order will follow the order they were specified in column definitions. Reference

But this is not working when working with ag-grid-angular. Some columns are showing up first, even though they were specified at the end of the column definitions. Take a look at some example codes,

// grid.ts
// helper function to generate a definition of a single column
function generateColDef() {
    return { ... };
}

// helper function to dynamically generate ColDefs
export function getColDef(someArgs) {
    const someDynamicCols = someArgs.map((arg) => {
        return generateColDef(.....);
    })
    const colDefs = [
        slColumn,   // A column to show serial number
        generateColDef('id', 'ID', {
            editable: false,
        }),
        generateColDef('name', 'Name', {
            editable: false,
        }),
        ...someDynamicCols,
    ];
    return colDefs;
}

// html
<ag-grid-angular [columnDefs]="colDefs" [rowData]="rowData | async">

// component
args = { some args fetched from server }
colDefs = grid.getColDef(args);
rowData = { some data fetched from server }

What I expect is that the 'ID' and 'Name' columns will show first and then the rest of the someDynamicCols will be displayed. But ag-grid sometimes displays the someDynamicCols first and then the 'ID' and 'Name' columns.

I tried using the ag-grid API to set colDefs instead of using 2-way binding but the result stayed the same.

Can someone explain what the issue might be? Is it the ag-grid API or am I doing something wrong?

I am using the latest ag-grid (24.0.0) with angular 10

Answer 1

EDIT 2021/10/20

Thanks to @JabbyPanda

applyColumnDefOrder API is deprecated since ag-grid 26

AG-5392 - Now when setting / updating Column Definitions, the order of the Columns in the grid will always match the order of the Column Definitions. Prior to v26, applyColumnDefOrder was used to achieve this, however this is now the default behaviour.

https://www.ag-grid.com/archive/26.0.0/javascript-data-grid/column-updating-definitions/

---

From the comments: You need to be on >= 24.0.0 version of ag-grid

---

After a long time, I've found the answer to this problem. I'm adding the solution in case it helps someone else.

The problem was, I was initializing the column definitions with some initial columns. So, when I added a new column, ag-grid kept the initial columns in their place and added the new columns after them. This is the default ag-grid behavior.

To override this behavior and make ag-grid always follow the column order, set applyColumnDefOrder property to true in Grid Options.

This is mentioned in the ag-grid docs: https://www.ag-grid.com/javascript-grid-column-updating-definitions/#applying-column-order

Answer 2

applyColumnDefOrder API is deprecated since ag-grid 26

AG-5392 - Now when setting / updating Column Definitions, the order of the Columns in the grid will always match the order of the Column Definitions. Prior to v26, applyColumnDefOrder was used to achieve this, however this is now the default behaviour.

To turn off this behaviour, i.e. to maintain the order of Columns between updates to Column Definitions, set the grid property maintainColumnOrder=true

https://www.ag-grid.com/archive/26.0.0/javascript-data-grid/column-updating-definitions/

Answer 3

Sometimes this issue can also occur when you load columnDefs variable multiple times e.g., with each button click or similar.

Best would be to load/ initialize the columnDefs only once and reload/ refresh row data on-demand.

Answer 4

This will ensure the Column's order should be maintained.

Set the grid property maintainColumnOrder=true

EX:

<ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-alpine"
      [defaultColDef]="defaultColDef"
      [maintainColumnOrder]="true"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

Reference: Maintain Column Order - https://www.ag-grid.com/angular-data-grid/column-updating-definitions/