如何避免ag-Grid非必要全宽展示 实现表格宽度自适应内容

ag-Grid宽度自适应内容配置方法 #

要实现ag-Grid宽度不默认拉伸至父容器全宽、仅跟随内容实际宽度展示，按以下步骤配置即可：

• 第一步：给ag-Grid外层容器添加CSS样式

/* 替换为你实际使用的ag-grid主题类名，也可以给容器加自定义类名控制 */
.ag-theme-quartz {
  width: fit-content;
  /* 可选：内容过宽时限制最大宽度为视口宽度，避免溢出页面 */
  max-width: 100%;
}

• 第二步：添加Grid配置，让列宽自动匹配内容
  在gridOptions中加入以下配置：

const gridOptions = {
  // 关闭默认的列拉伸适配父容器宽度行为
  suppressSizeToFit: true,
  onGridReady: (params) => {
    // 所有列自动适配内容宽度
    params.api.autoSizeAllColumns();
  },
  // 你的其他配置、列定义等...
}

如果是React项目使用AgGridReact组件，直接把上述配置项作为组件属性传入即可，逻辑完全一致。如果需要在数据更新时也同步调整宽度，在数据变更的回调里再次调用api.autoSizeAllColumns()即可。

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