How to display Group column on the left after setColumnState()?

Question

I am using Ag-grid to display data on my website. I want to allow a user to modify the view state (change column ordering, group rows, filter, etc); save that modified state; restore it later. I know this is standard functionality, and I am following the official example here: https://www.ag-grid.com/documentation/javascript/column-state/#save-and-apply-state

Like the example, my code uses const savedState = gridOptions.columnApi.getColumnState(); to get/save the column state. And later, gridOptions.columnApi.applyColumnState({ state: savedState }); to restore the state.

The problem I am having is that if a user groups rows, the "Group" column moves to the far right when the column state is restored. It starts on the left when first grouped (which is what I want), but then moves to the right when restored (which is not what I want).

How do I get the Group column(s) on the left after setColumnState()?

I see the same undesired behavior in the official example. To illustrate:

1. go to the example link posted above

2. group by some field (Sport, in this example)

3. "Group" column auto-populates at far left (which I want)

4. Click: Save State. Reset State. Restore State.

5. The restored state now shows the "Group" column at far right (which is not what I want)

Answer 1

Unfortunately the behavior you are describing is a BUG and it has been fixed in the current nightly build version of AG Grid. So, you will need to wait until the next release (probably 25.2.0).

I know this doesn't help, but at least you won't keep beating yourself up trying to find a way to fix it. What you could do instead, for the time being, is to apply the state and then move the Grouped Column to the left.

gridOptions.columnApi.moveColumns(['ag-Grid-AutoColumn'], 0);

See: https://plnkr.co/edit/Kg4UPNA8aWL6QRgi

Answer 2

You have to pass applyOrder:false to get the group column on the far left.

function restoreState() {
  if (!window.colState) {
    console.log('no columns state to restore by, you must save state first');
    return;
  }
  gridOptions.columnApi.applyColumnState({
    state: window.colState,
    applyOrder: false, // Make it false here
  });
  console.log('column state restored');
}

Here's a live example: https://plnkr.co/edit/LnViTPw082x0Y9sw?preview