React.js中AG Grid表格如何实现列宽响应式及设置百分比宽度？

AG Grid 原生不支持直接在 columnDefs 的 width 属性中传入百分比值，直接替换为百分比字符串不会生效，你可以通过以下两种方案实现响应式列宽效果：

方案1：使用 flex 权重 + sizeColumnsToFit API（推荐） #

AG Grid 列定义支持 flex 属性，规则和 CSS flex 一致，系统会根据所有列的 flex 权重占比自动分配容器宽度，同时会自动遵守你配置的 minWidth 和 maxWidth 限制。

步骤1：修改列定义配置 #

columnDefinitionComplaintAndRequest: [
  { 
    headerName: "Sıra", 
    field: "", 
    minWidth: 10, 
    maxWidth: 300, 
    flex: 1, // 权重占1份
    suppressSizeToFit: false 
  },
  { 
    headerName: "Subscriber No", 
    field: "", 
    minWidth: 10, 
    maxWidth: 450, 
    flex: 4, // 权重占4份，宽度为第一列的4倍
    suppressSizeToFit: false 
  },
  // 其余列按需配置flex权重即可
]

步骤2：在React组件中触发自适应 #

import { useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const MyGrid = () => {
  const [gridApi, setGridApi] = useState(null);

  // 网格初始化时触发首次列宽适配
  const onGridReady = (params) => {
    setGridApi(params.api);
    params.api.sizeColumnsToFit();
  };

  // 监听窗口尺寸变化，重新适配列宽
  useEffect(() => {
    const handleResize = () => {
      gridApi?.sizeColumnsToFit();
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [gridApi]);

  return (
    <div className="ag-theme-alpine" style={{ width: '100%', height: 600 }}>
      <AgGridReact
        columnDefs={columnDefinitionComplaintAndRequest}
        rowData={rowData}
        onGridReady={onGridReady}
      />
    </div>
  );
};

方案2：手动计算百分比转固定像素 #

如果需要严格按固定百分比分配列宽（比如第一列占10%、第二列占20%），可以手动获取网格容器宽度计算对应像素值，再调用API设置：

// 提前定义每列的占比百分比，顺序和列定义保持一致
const colPercentConfig = [10, 30, 60];

const setPercentWidth = (api) => {
  // 获取网格容器的实际宽度
  const gridContainerWidth = document.querySelector('.ag-root-wrapper-body').clientWidth;
  const widthUpdateConfig = columnDefinitionComplaintAndRequest.map((col, index) => {
    const targetPx = gridContainerWidth * (colPercentConfig[index] / 100);
    // 兼容minWidth和maxWidth限制
    const finalWidth = Math.max(col.minWidth, Math.min(targetPx, col.maxWidth));
    return { key: col.headerName, newWidth: finalWidth };
  });
  api.setColumnWidths(widthUpdateConfig);
};

将上述方法在 onGridReady 和窗口 resize 事件中调用即可生效。

注意事项 #

• 若配置了固定列（pinned），手动计算宽度时需要先减去固定列的总宽度，再分配剩余区域的百分比
• suppressSizeToFit 必须设为 false，设为 true 的列不会参与自动适配逻辑
• flex 模式下如果所有列的 minWidth 总和超过容器宽度，会自动出现横向滚动条，不会挤压列宽

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