Why adding a column to ag-grid-react causes all cells to rerender?

Question

I have an app that uses ag-grid-react 21.0.1 and when I add a column all cells rerender, which is extremely heavy and for larger grids makes the app completely unusable. Is there any way to prevent this? I pass exactly the same rowData and do not change references of other columnDefs

Answer 1

You should use columnApi.setColumnState() to update the column visibility. Avoid setState (which I assume in you case) because it's unnecessary. Ag-grid will handle the rest for you. Something like this:

    const show = true; // or false depend on what you want
    const columnState = columnApi.getColumnState();
    const newColumnState = columnState.map((c) => {
      const nc = { ...c };
      if (c.colId === targetColId) {
        nc.hide = show;
      }
      return nc;
    });
    columnApi.setColumnState(newColumnState);

Live Example