How to retrieve the column index in ag-grid?

Question

In ag-grid, when I want to retrieve the row index I use:

params.node.id

However, I couldn't find a way to do the same for columns. All that I found is retrieve the columnId which refers to the field variable in the column definition.
I.e: If this is the column definition:

 {
   headerName: "checkButton 2",
   field: "checkbuttonTwo",
   cellRenderer: "checkButtonComponent",
   width: 150
 }

This:

params.column.getId()  

Would return:

 checkbuttonTwo

So my question is:
Is there any way to retrieve the column index? For example: For the second column I would have 2 and so on and so forth.
Thank you

Concertante

Answer 1

I wrote a helper function in TypeScript for getting the column index by col id.

function getColumnIndexByColId(api: ColumnApi, colId: string): number {
    return api.getAllColumns().findIndex(col => col.getColId() === colId);
}

Incestuous

This doesn't work for me. I use the gridColumnApi and call its getAllGridColumns() method. – Allemande

Answer 2

There is no direct way to get the column index, however you can use the getAllColumns() method on Column API to get all columns and then find the index of your column from that array.

More info on Column API here

Florrieflorry

No, I actually found a trick to solve this. will post the answer later on – Concertante

@AhmedGhrib could you share your solution with everyone? – Mcinerney

Answer 3

If you use GridApi to retrieve columnDefs like this:

api.getColumnDefs();

returned array has the same order as displayed data on the table.

Billhead

Answer 4

Looks like Column API are deprecated as of v.31 in favor of Grid API.

So, using Grid API this is what works for me, thanks to @konuralpt's answer :

colIndex = params.api.getColumnDefs().findIndex(col => col.field === params.column.colId);

... where params.column.colId would return "checkbuttonTwo" in OP's example. (The OP's params.column.getId() works, too).

Weirdo

Answer 5

You can get the column headerName by running this function:

function CustomTooltip() {}

CustomTooltip.prototype.init = function(params) {
  var headerName = params.colDef.headerName;
}

Frisket

Answer 6

For each column, You can define a unique id this way:

{
          headerName: "Axa premises",
          field: "axPr",
          width: 150,
          id:0,
          cellRenderer:'iasaCheckboxRendererComponent'
            }

And you can access it in this manner:

this.params.column.colDef.id

Concertante

You forced client to use number as id, This column could be reordered, what then? – Mailbag