Search code examples
web-componentag-grid

How to sort the columns in the tool panel. Ag-Grid

Edit: Found out move column doesn't work in v6.4.0

Example Link: https://www.ag-grid.com/javascript-grid-tool-panel/toolPanelExample.html

The order of columns visible in the tool panel are always in the same order that they are defined in the column definition. Check the image below.

The way they are shown in the tool panel. Want to sort it say alphabetically

The order they are shown in the grid

Is it possible to sort them in the tool panel in an order(say alphabetically) but without changing the order they are shown in the grid.

What I tried:

I tried defining them in alphabetical order in the columnDefination and tried to move them to there position using the columnApi.moveColumn(). That doesn't seems to work either also that increases the complexity when I have to move all the columns and position them.

Questions:

  1. Is this even possible/feasible?
  2. The moveColumn() function is not working. Can you tell in which version it was introduced not able to find it in changeLog.

Additional Details:

Using ag-grid enterprise version v6.4.0

Solution

  • Please refer to this plnkr. I used the same basic idea that you had, creating the colDefs in alphabetical order then in the onGridReady function moved the columns to their respective placements. There are two functions that are useful in doing this, the second is much preferable in my opinion:

    moveColumn(colKey, toIndex)
//colKey refers to the id of the column which defaults to the specified field
//toIndex is simply a number that is within the range of columns.

moveColumns(colKeys[], toIndex)
//colKeys[] is an array in the order that you want them to be
  displayed starting at the toIndex

    Here is how I implemented it in the plnkr:

    private onReady() {

    // this.gridOptions.columnApi.moveColumn('name',1)
    // this.gridOptions.columnApi.moveColumn('country',2)
    // this.gridOptions.columnApi.moveColumn('dob',3)
    // this.gridOptions.columnApi.moveColumn('skills',4)
    // this.gridOptions.columnApi.moveColumn('proficiency',5)
    // this.gridOptions.columnApi.moveColumn('mobile',6)
    // this.gridOptions.columnApi.moveColumn('landline',7)
    // this.gridOptions.columnApi.moveColumn('address',8),

    this.gridOptions.columnApi.moveColumns(['name', 'country', 'dob', 'skills', 'proficiency', 'mobile', 'landline', 'address'],1)

}

    There is one more function that is available to you if you would like to use it:

    moveColumnByIndex(fromIndex, toIndex)
//This uses just indexes and not the colid/colkey idea if you prefer
  to keep it more anonymous