如何实现AG Grid列自适应内容且带最大宽度限制的自动列宽？

要实现首次加载时列根据内容自动调整宽度，但不限制后续手动调宽的需求，可以通过以下步骤完成：

1. 启用自动适配内容的列宽策略
   先在网格配置中开启fitCellContents，让AG Grid在首次加载时自动根据内容计算列宽：

const gridOptions = {
  columnDefs: [
    // 你的列定义，不要设置defaultMaxWidth
    { field: 'name' },
    { field: 'description' },
    // 其他列...
  ],
  autoSizeStrategy: {
    type: 'fitCellContents'
  },
  // 其他网格配置项
};

2. 在网格就绪后修正列宽到最大限制
   利用gridReady事件，在网格完全初始化后，遍历所有可见列，将自动计算的列宽与设定的最大宽度对比，取较小值设置为最终列宽，同时不设置列的maxWidth属性，确保用户后续可以手动调整列宽：

const gridOptions = {
  // ... 上述列定义和自动适配配置
  onGridReady: (params) => {
    // 全局最大宽度阈值，可根据需求修改
    const GLOBAL_MAX_WIDTH = 300;

    // 获取所有可见列
    const displayedColumns = params.columnApi.getAllDisplayedColumns();

    displayedColumns.forEach(column => {
      // 获取自动适配后的列宽
      const autoCalculatedWidth = column.getActualWidth();
      // 取自动宽度和最大宽度的较小值
      const finalWidth = Math.min(autoCalculatedWidth, GLOBAL_MAX_WIDTH);
      // 设置最终列宽
      params.columnApi.setColumnWidth(column.getColId(), finalWidth);
    });
  }
};

3. （可选）给不同列设置独立最大宽度
   如果需要为不同列指定不同的最大宽度，可以在列定义中添加自定义属性，比如customMaxWidth，然后在遍历列时读取该值：

const gridOptions = {
  columnDefs: [
    { field: 'name', customMaxWidth: 200 },
    { field: 'description', customMaxWidth: 400 },
    { field: 'status' } // 未设置则使用全局默认值
  ],
  autoSizeStrategy: {
    type: 'fitCellContents'
  },
  onGridReady: (params) => {
    const DEFAULT_MAX_WIDTH = 300;
    const displayedColumns = params.columnApi.getAllDisplayedColumns();

    displayedColumns.forEach(column => {
      const colDef = column.getColDef();
      // 优先使用列自定义的最大宽度，否则用默认值
      const targetMaxWidth = colDef.customMaxWidth || DEFAULT_MAX_WIDTH;
      const autoWidth = column.getActualWidth();
      const finalWidth = Math.min(autoWidth, targetMaxWidth);
      params.columnApi.setColumnWidth(column.getColId(), finalWidth);
    });
  }
};

核心逻辑说明 #

• 先依赖AG Grid的fitCellContents完成自动列宽计算，确保内容完整显示（在最大宽度内）。
• 手动修正列宽后，不设置列的maxWidth或defaultMaxWidth，避免限制用户后续手动调整列宽的操作。

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