如何处理ag-grid-react的列宽问题？调宽包裹容器时网格溢出且列定义设宽不生效

列宽配置不生效排查方向 #

• 排查flex配置优先级冲突：当列定义或全局defaultColDef中配置了flex属性时，flex的宽度自适应规则会优先覆盖手动设置的width值，需移除对应flex配置，静态列宽设置才能正常生效
• 确认列宽配置挂载位置：列宽参数必须写在单条columnDefs的对象属性内部，不能挂载在AgGridReact的顶层props上
• 排查全局自动列宽覆盖逻辑：若网格初始化时触发了全量列宽重算逻辑，会直接覆盖初始化时设置的静态列宽值，需要根据业务场景对需要固定宽度的列单独锁定配置

外层div调宽后网格溢出修复方案 #

• 给AgGridReact补充100%宽高的基础适配样式：默认样式下组件不会自动撑满父容器，会保留初始化时的宽度值，调整父容器宽度后就会出现溢出，给组件style添加width: '100%', height: '100%'即可让组件跟随父容器尺寸变化
• 补充网格重排触发逻辑：在onGridReady回调中获取gridApi实例，配合ResizeObserver监听包裹AgGridReact的div容器尺寸变化，主动调用gridApi.doLayout()触发网格重排，避免组件无法感知容器尺寸变化导致的边界溢出
• 检查domLayout配置：确认domLayout未被误改为autoHeight或print模式，这两种模式下网格不会自动限制自身宽度在容器可视范围内，容易出现溢出问题，常规业务场景使用默认的normal布局即可

修正后可直接参考的组件配置代码 #

// onGridReady 核心逻辑实现
const onGridReady = (params) => {
  window.gridApi = params.api;
  // 绑定容器尺寸变化监听
  const resizeObserver = new ResizeObserver(() => {
    // 触发网格重算布局
    window.gridApi?.doLayout();
    // 若需要列自动填满容器可视宽度，可放开下方注释
    // window.gridApi?.sizeColumnsToFit();
  });
  // 监听包裹AgGridReact的父容器
  resizeObserver.observe(wrapperDomRef.current);
}

<AgGridReact
  style={{ width: '100%', height: '100%', backgroundColor: "red" }}
  domLayout="normal"
  onCellValueChanged={onCellValueChanged}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  onGridReady={onGridReady}
  rowSelection="multiple"
  onSelectionChanged={onSelectionChanged}
  getRowHeight={rowHeight}
>
</AgGridReact>

内容的提问来源于stack exchange，提问作者10 Trends