如何通过键盘从AG Grid最后一行单元格直接导航至页脚？

可以通过自定义AG Grid的键盘事件处理逻辑，实现从表格最后一行最后一个单元格直接Tab导航到分页页脚按钮，具体实现如下：

• 核心逻辑：监听单元格的Tab按键事件，判断当前是否处于最后一行的最后一个单元格，满足条件时手动将焦点转移到分页控件的可交互元素上，覆盖默认Tab行为。

具体实现代码 #

在AG Grid的配置项中添加onCellKeyDown回调：

gridOptions = {
  // 你的其他表格配置
  onCellKeyDown: (params) => {
    // 仅处理正向Tab（非Shift+Tab）
    if (params.event.key === 'Tab' && !params.event.shiftKey) {
      const displayedRowCount = params.api.getDisplayedRowCount();
      // 判断是否是最后一行
      const isLastRow = params.rowIndex === displayedRowCount - 1;
      if (!isLastRow) return;

      const displayedColumns = params.columnApi.getAllDisplayedColumns();
      const columnCount = displayedColumns.length;
      // 判断是否是当前行的最后一个单元格
      const isLastColumn = params.columnApi.getColumnIndex(params.column) === columnCount - 1;
      if (!isLastColumn) return;

      // 阻止默认Tab行为，避免焦点跳转到页面其他元素
      params.event.preventDefault();

      // 定位分页面板并聚焦第一个可用按钮
      const paginationPanel = document.querySelector('.ag-paging-panel');
      const firstEnabledBtn = paginationPanel?.querySelector('button:not([disabled])');
      firstEnabledBtn?.focus();
    }
  }
};

关键注意点 #

• DOM选择器适配：.ag-paging-panel是AG Grid默认的分页容器类名，若你使用了自定义分页组件，需要修改为对应的容器选择器。
• 禁用按钮处理：代码中优先聚焦未禁用的分页按钮，避免聚焦到不可交互元素。
• 反向导航支持：如果需要从分页按钮Shift+Tab回到最后单元格，可以补充监听分页按钮的keydown事件，在Shift+Tab触发时将焦点转移到最后单元格。

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