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

can you create a small plunkr or stackblitz reproducing your issue. it looks like debugging issue.. — sandeep joshi
My use case makes building a plunkr a bit difficult. But I'll try to add one. Thanks for the suggestion — Jahir
just try to add minimal code which is enough to reproduce the issue ,that will make easy for folks here to debug. — sandeep joshi

Jahir Jahir · Accepted Answer · 2020-11-22T08:44:26

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

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

1 Answers