AG Grid列隐藏后仅显示含数据行及过滤栏同步隐藏列方案

需求1：隐藏列后自动隐藏无数据行 #

核心逻辑：监听列可见性变化，实时判断每行在当前可见列中是否存在非空数据，通过AG Grid原生的行可见性钩子实现动态显示/隐藏。

实现代码 #

// 初始化Grid配置
const gridOptions = {
  columnDefs: [/* 你的列定义 */],
  rowData: [/* 你的行数据 */],
  sideBar: 'columns', // 启用列管理侧边栏
  // 行可见性判断回调
  isRowVisible: (params) => {
    // 获取当前所有可见列的字段名
    const visibleFields = params.api.getAllDisplayedColumns().map(col => col.getColId());
    // 检查当前行在可见列中是否有有效数据
    return visibleFields.some(field => {
      const value = params.data[field];
      // 可根据业务调整空值判断规则，比如排除0、空数组等
      return value !== null && value !== undefined && value !== '';
    });
  },
  // 列可见性变化时触发行重新渲染
  onColumnVisibleChanged: (params) => {
    params.api.refreshRows({ force: true });
  }
};

关键说明 #

• getAllDisplayedColumns()：精准获取当前所有未隐藏的列
• isRowVisible：AG Grid提供的行级钩子，返回true显示行，false隐藏行
• refreshRows({force: true})：强制触发行可见性重新计算，确保状态实时更新

需求2：过滤工具栏与列可见性同步 #

核心逻辑：监听列可见性变化，动态修改列配置的suppressFilter属性，控制过滤工具栏的显示/隐藏。

实现代码 #

// 初始化列定义时配置默认过滤规则
const columnDefs = [
  { field: 'name', filter: 'agTextColumnFilter', suppressFilter: false },
  { field: 'age', filter: 'agNumberColumnFilter', suppressFilter: false },
  // 其他列定义...
];

const gridOptions = {
  columnDefs: columnDefs,
  rowData: [/* 你的行数据 */],
  sideBar: 'columns',
  // 列可见性变化时同步过滤工具栏状态
  onColumnVisibleChanged: (params) => {
    const targetCol = params.column;
    // 根据列可见性切换过滤栏显示状态
    targetCol.setColDef({
      suppressFilter: !targetCol.isVisible()
    });
    // 刷新列头使配置生效
    params.api.refreshHeader();
  }
};

关键说明 #

• suppressFilter：AG Grid列配置属性，设为true会隐藏对应列的过滤工具栏
• setColDef：动态修改列的配置项，无需重新初始化Grid
• refreshHeader：立即刷新列头，确保过滤栏状态同步更新

合并优化（避免重复监听） #

两个需求可共用同一个onColumnVisibleChanged回调，减少冗余代码：

onColumnVisibleChanged: (params) => {
  // 处理需求2：同步过滤工具栏
  const targetCol = params.column;
  targetCol.setColDef({ suppressFilter: !targetCol.isVisible() });
  params.api.refreshHeader();

  // 处理需求1：刷新行可见性
  params.api.refreshRows({ force: true });
}

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