diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index ceb93ac43588a..41226d16442c8 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -667,6 +667,20 @@ export const useGridColumnResize = ( const columnVirtualizationDisabled = useColumnVirtualizationDisabled(apiRef); const isAutosizingRef = React.useRef(false); + + React.useEffect(() => { + if (colDefRef.current && !isAutosizingRef.current) { + const columnsState = gridColumnsStateSelector(apiRef.current.state); + const column: GridStateColDef = columnsState.lookup[colDefRef.current.field]; + const width: number = column.width as number; + apiRef.current.publishEvent('columnWidthChange', { + element: apiRef.current.getColumnHeaderElement(colDefRef.current.field), + colDef: { ...colDefRef.current, width }, + width, + }); + } + }, [isAutosizingRef.current]); + const autosizeColumns = React.useCallback( async (userOptions) => { const root = apiRef.current.rootElementRef?.current; @@ -723,17 +737,6 @@ export const useGridColumnResize = ( } apiRef.current.updateColumns(newColumns); - - if (colDefRef.current) { - const columnsState = gridColumnsStateSelector(apiRef.current.state); - const column: GridStateColDef = columnsState.lookup[colDefRef.current.field]; - const width: number = column.width as number; - apiRef.current.publishEvent('columnWidthChange', { - element: apiRef.current.getColumnHeaderElement(colDefRef.current.field), - colDef: { ...colDefRef.current, width }, - width, - }); - } } finally { apiRef.current.unstable_setColumnVirtualization(true); isAutosizingRef.current = false;