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?

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?

• javascript
• reactjs
• ag-grid

• You can fork the project and change this function to not taking account of the child columns when deciding if the column group movement should be supressed. – NearHuscarl Commented Sep 18, 2020 at 8:50

3 Answers 3

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)

You can use the follow properties to lock the drag and drop behavior: lockPosition and suppressMovable: true.

const [columnDefs, setColumnDefs] = useState([
  {
    field: 'athlete',
    suppressMovable: true,
    cellClass: 'suppress-movable-col',
  },
  { field: 'age', lockPosition: 'left', cellClass: 'locked-col' },
  { field: 'country' },
  { field: 'year' },
  { field: 'total', lockPosition: 'right', cellClass: 'locked-col' 
},
]);
const defaultColDef = useMemo(() => {
   return {
     flex: 1,
     lockPinned: true, // Dont allow pinning for this example
   };
  }, []);

Sample in plunker Documentation

I used onColumnHeaderMouseOver grid event to activate suppressMovable when column.isColumn is true.

example:

function toggleMovable(event: ColumnHeaderMouseOverEvent){
 // retrive all col defs
 const gridColDefs = event.api.getColumnDefs();

 // update coldefs for child columns
 const updatedColDefs = gridColDefs?.map((colDef)=> colDef?.groupId=== undefined ? 
  colDef : 
   {
    ...colDef,
    children: colDef.children.map((childColDef)=>({...childColDef, suppressMovable:event.column.isColumn}))
   })

  // used lodash isEqual function to pare equality
  if(!isEqual(gridColDefs, updatedColDefs){
    event.api.setGridOption('columnDefs', updatedColDefs)
  }

}

This function will get trigger on hover of column group header. Which will make column movable.