AG Grid React排序后单元格焦点错位问题解决方案咨询

问题根源 #

排序后AG Grid的渲染行索引与原始数据的索引不再对应，若你的焦点/编辑逻辑依赖原始数据索引，就会出现跳转错误。

解决方案 #

1. 配置行节点唯一ID（核心步骤） #

通过getNodeId为每行绑定唯一标识，确保排序后行节点的身份不随视图顺序变化而改变：

<AgGridReact
  rowData={yourRowData}
  columnDefs={yourColumnDefs}
  // 用数据中唯一字段（如id）作为行节点ID
  getNodeId={(rowData) => rowData.id}
  // 其他必要配置
/>

2. 修改焦点/编辑逻辑，依赖行节点而非索引 #

不要使用原始数据索引定位单元格，直接通过rowNode对象获取当前视图的正确位置：

示例1：点击单元格启动编辑

const handleCellClick = (params) => {
  params.api.startEditingCell({
    // 使用当前行节点的视图索引
    rowIndex: params.rowNode.rowIndex,
    colKey: params.column.colId
  });
};

<AgGridReact
  // 其他配置
  onCellClicked={handleCellClick}
/>

示例2：持久化焦点状态（排序后恢复正确焦点）

如果需要保存焦点状态，存储行节点ID而非索引，排序后通过ID找回行节点：

import { useState, useRef, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';

const YourGridComponent = () => {
  const gridApiRef = useRef(null);
  const [focusedRowId, setFocusedRowId] = useState(null);

  const onCellFocused = (params) => {
    if (params.rowNode) {
      // 存储行节点唯一ID
      setFocusedRowId(params.rowNode.id);
    }
  };

  // 排序后恢复焦点
  useEffect(() => {
    if (gridApiRef.current && focusedRowId) {
      const rowNode = gridApiRef.current.getRowNode(focusedRowId);
      if (rowNode) {
        gridApiRef.current.setFocusedCell(rowNode.rowIndex, 'your-column-id');
      }
    }
  }, [focusedRowId]);

  return (
    <AgGridReact
      ref={gridApiRef}
      rowData={yourRowData}
      columnDefs={yourColumnDefs}
      getNodeId={(rowData) => rowData.id}
      onCellFocused={onCellFocused}
      // 其他配置
    />
  );
};

3. 检查自定义逻辑中的索引依赖 #

排查你之前的onCellFocused或其他编辑相关代码，确保没有使用原始数据的索引（比如从rowData数组中取的索引）来定位单元格，全部替换为rowNode.rowIndex或rowNode.id。

验证方法 #

排序后点击任意单元格，查看编辑状态是否正确绑定到当前点击的行；按Tab切换时，确认焦点按当前视图顺序移动。

内容的提问来源于stack exchange，提问作者J.Anupallavi