AG-Grid中如何让固定列填充网格剩余空间？

AG-Grid中，当给列同时设置pinned: 'left'（或right）和flex: 1时，flex属性会被忽略，固定列只会以默认宽度渲染。这是因为AG-Grid的固定列容器与滚动列容器是分离的，flex布局的空间分配逻辑仅作用于滚动列区域，固定列不参与该计算——官方文档虽未明确标注此限制，但这是布局机制导致的必然结果。

可行解决方案 #

以下是两种实现“固定列填充剩余空间”效果的方法：

1. 动态计算并设置固定列宽度

通过监听网格容器的尺寸变化，手动计算固定列应占的宽度并更新：

// 获取AG-Grid实例（以Angular为例，其他框架可通过对应方式获取）
onGridReady(params: GridReadyEvent) {
  const gridApi = params.api;

  // 定义计算并更新固定列宽度的函数
  const updatePinnedColumnWidth = () => {
    const gridContainer = document.querySelector('.ag-root-wrapper');
    if (!gridContainer) return;

    // 网格容器总宽度
    const totalWidth = gridContainer.offsetWidth;
    // 非固定列的总宽度
    const nonPinnedColumns = gridApi.getAllColumns().filter(col => !col.isPinned());
    const nonPinnedTotalWidth = nonPinnedColumns.reduce((sum, col) => sum + col.getActualWidth(), 0);
    // 预留滚动条宽度（根据实际情况调整）
    const scrollbarOffset = 20;
    // 计算固定列应有的宽度
    const targetWidth = totalWidth - nonPinnedTotalWidth - scrollbarOffset;

    // 更新固定列宽度，同时设置最小宽度避免过窄
    gridApi.setColumnWidth('name', Math.max(targetWidth, 100));
  };

  // 初始化时执行一次
  updatePinnedColumnWidth();
  // 监听窗口 resize 事件，实时更新
  window.addEventListener('resize', updatePinnedColumnWidth);

  // 组件销毁时移除监听，避免内存泄漏
  this.destroy$.subscribe(() => {
    window.removeEventListener('resize', updatePinnedColumnWidth);
  });
}

2. 结合autoSizeColumns与动态宽度

如果希望固定列先根据内容自适应，再填充剩余空间，可以先调用autoSizeColumns获取内容宽度，再结合动态计算调整：

onGridReady(params: GridReadyEvent) {
  const gridApi = params.api;
  const columnApi = params.columnApi;

  // 先让固定列根据内容自适应宽度
  columnApi.autoSizeColumns(['name']);
  const initialPinnedWidth = gridApi.getColumn('name')?.getActualWidth() || 100;

  const updatePinnedColumnWidth = () => {
    const gridContainer = document.querySelector('.ag-root-wrapper');
    if (!gridContainer) return;

    const totalWidth = gridContainer.offsetWidth;
    const nonPinnedColumns = gridApi.getAllColumns().filter(col => !col.isPinned());
    const nonPinnedTotalWidth = nonPinnedColumns.reduce((sum, col) => sum + col.getActualWidth(), 0);
    const scrollbarOffset = 20;
    const targetWidth = totalWidth - nonPinnedTotalWidth - scrollbarOffset;

    // 取内容自适应宽度和剩余空间宽度的最大值
    gridApi.setColumnWidth('name', Math.max(targetWidth, initialPinnedWidth));
  };

  updatePinnedColumnWidth();
  window.addEventListener('resize', updatePinnedColumnWidth);
}

注意事项 #

• 不同框架（Angular/React/Vue）获取网格实例的方式略有差异，需根据实际项目调整。
• 滚动条宽度可能因浏览器和系统不同而变化，可通过动态计算获取准确值，避免布局偏差。
• 组件销毁时务必移除resize监听，防止内存泄漏。

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