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

Guillermoguilloche

can you create a small plunkr or stackblitz reproducing your issue. it looks like debugging issue.. – Refugiorefulgence

My use case makes building a plunkr a bit difficult. But I'll try to add one. Thanks for the suggestion – Guillermoguilloche

just try to add minimal code which is enough to reproduce the issue ,that will make easy for folks here to debug. – Refugiorefulgence

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

Guillermoguilloche

You need to be on version 24.0.0 or greater to use this property. – Doodlesack

Thanks for this tip. An easy fix but you have to know how! – Supererogatory

the documentation page mentioned above for ag-grid v24 is moved to ag-grid.com/archive/24.0.0/… – Fanlight

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/

Fanlight

Answer 3

for some one like me who has the issu yet, the trick is to set an empty array between update and it works:

api.updateColDef([])
api.updateColDef(newCols)

Agronomy

Answer 4

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.

Sensor

Answer 5

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/

Obovate

Answer 6

Using AG-grid 30.2.*

Setting grid property maintainColumnOrder = true & property applyOrder = true of column api state in grid options solved the issue for me.

[maintainColumnOrder]="true"

onGridReady: (event: AgGridEvent) => {
    event.columnApi.applyColumnState({ state: colState, applyOrder: true });
}

Note - colState is state saved/wanted to persists.

Flutist