Disable movement of columns in agGrid

user_12540500 0
Viewed 3646

I'm using AgGrid table in my application. Here is the demo. According to the documentation i want to stop movement of the columns. For this i used:

suppressMovable: true

The above code I used here:

 columnDefs: [
        {
          headerName: 'Athlete',  //the generic name of header
          children: [
            {
              field: 'athlete',   //children header from generic header
              width: 150,
              suppressMovable:true
            },
            {
              field: 'age',
              lockVisible: true,
              cellClass: 'locked-visible',
              suppressMovable:true

            },
            {
              field: 'country',
              width: 150,
            },
            { field: 'year' },
            { field: 'date' },
            { field: 'sport' },
          ],
          ...

suppressMovable:true, it works, and the athlete and age columns aren't possible to be moved like others, but this code also disable the movement of the main column: Athlete. So when i try to switch the place of Athlete and Medals columns, i can't, but i don't want this, i want to set this 2 main columns as movable.
Question: How to disable movement of columns inside the Athlete and Column, but to keep the movement functionality of these 2 main columns?

ag-grid reactjs javascript
1 Answers

Out of the box answer is you can't.

If any child is fixed, then AG Grid doesn't allow moving the group.

you can write custom event listener(if possible) to change the suppressMovable property of child columns while the parent column is being dragged and then again set them to not movable/suppressMovable to true. else you can programatically move all columns in a group using moveColumnByIndex(from,to)

user_82335480
Related