如何在Ag-Grid中条件触发列宽自适应调整

实现方案 #

你不需要依赖onDisplayedColumnsChanged的返回属性，换用更针对性的实现逻辑即可解决问题，具体可以参考以下两种方案：

方案1：监听AG-Grid细分事件，仅在目标操作时触发适配

AG-Grid提供了列变更相关的独立事件，你可以分别监听列显隐、分组、列定义变更这几个目标场景，仅在对应操作发生时调用sizeColumnsToFit()，避免影响用户手动调整列宽、拖拽列排序的操作：

• 列显示/隐藏操作：监听columnVisible事件
• 列分组/取消分组操作：监听columnRowGroupChanged事件
• 动态新增/删除列（修改列定义）操作：监听gridColumnsChanged事件

React版本示例代码：

import { useCallback } from 'react'
import { AgGridReact } from 'ag-grid-react'

const GridComponent = () => {
  // 列显隐时触发适配
  const onColumnVisible = useCallback((event) => {
    event.api.sizeColumnsToFit()
  }, [])

  // 列分组变更时触发适配
  const onColumnRowGroupChanged = useCallback((event) => {
    event.api.sizeColumnsToFit()
  }, [])

  // 列定义整体变更时触发适配
  const onGridColumnsChanged = useCallback((event) => {
    event.api.sizeColumnsToFit()
  }, [])

  return (
    <AgGridReact
      // 其他表格配置省略
      onColumnVisible={onColumnVisible}
      onColumnRowGroupChanged={onColumnRowGroupChanged}
      onGridColumnsChanged={onGridColumnsChanged}
    />
  )
}

方案2：保留onDisplayedColumnsChanged，加状态缓存过滤无效触发

如果你的场景需要统一在该事件中处理，可以维护一个展示列的缓存标识，每次事件触发时对比当前展示列的ID列表和缓存列表是否有变化，只有列新增/移除/分组导致列列表变化时才调用适配方法，过滤掉手动调列宽、拖拽列顺序导致的无效触发：

import { useCallback, useRef } from 'react'
import { AgGridReact } from 'ag-grid-react'

const GridComponent = () => {
  // 缓存当前展示的列ID列表
  const displayedColumnsRef = useRef([])

  const onDisplayedColumnsChanged = useCallback((event) => {
    const currentColIds = event.columnApi.getAllDisplayedColumns().map(col => col.getColId())
    // 仅当展示列列表发生变更时才触发适配
    if (JSON.stringify(currentColIds) !== JSON.stringify(displayedColumnsRef.current)) {
      event.api.sizeColumnsToFit()
      displayedColumnsRef.current = currentColIds
    }
  }, [])

  return (
    <AgGridReact
      // 其他表格配置省略
      onDisplayedColumnsChanged={onDisplayedColumnsChanged}
    />
  )
}

补充优化：保留用户手动调整过的列宽 #

如果需要更精细的控制，可以额外监听列宽度调整事件，记录用户手动修改过的列，调用sizeColumnsToFit()时跳过这些列即可：

// 存储用户手动调整过的列ID
const manualResizedCols = useRef(new Set())

// 监听列宽调整事件，标记用户手动修改的列
const onColumnResized = useCallback((event) => {
  if (event.source === 'uiColumnResize') {
    event.columns.forEach(col => manualResizedCols.current.add(col.getColId()))
  }
}, [])

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