在Fluent UI Dialog中使用AgGridReact时列无法调整大小的解决办法

• 禁用Dialog遮罩层的事件拦截
  FluentUI Dialog默认的遮罩层会捕获鼠标事件，导致AgGrid的列宽调整事件无法触发。在Dialog组件中设置modalProps={{ disableOverlayPointerEvents: true }}，让事件能透传到AgGrid：

  <Dialog
    // 你的Dialog其他属性
    modalProps={{ disableOverlayPointerEvents: true }}
  >
    <AgGridReact 
      columnDefs={columnDefs} 
      rowData={props.jobProgress}
      defaultColDef={{ resizable: true, sortable: true }}
    />
  </Dialog>
  

• 检查并修复容器的指针事件设置
  确认Dialog内部包裹AgGrid的容器没有设置pointer-events: none，如果存在该样式，修改为pointer-events: auto：

  .ag-grid-wrapper {
    pointer-events: auto;
  }
  

• 强制AgGrid重新初始化头部事件监听
  若上述方法无效，可在Dialog打开后手动触发AgGrid头部刷新，确保事件监听正确绑定：

  const gridRef = useRef(null);
  
  // 假设Dialog的显示状态由isOpen变量控制
  useEffect(() => {
    if (isOpen && gridRef.current) {
      gridRef.current.api.refreshHeader();
    }
  }, [isOpen]);
  
  <AgGridReact
    ref={gridRef}
    columnDefs={columnDefs} 
    rowData={props.jobProgress}
    defaultColDef={{ resizable: true, sortable: true }}
  />
  

内容的提问来源于stack exchange，提问作者Ofer Gal