React TS中AG Grid 27社区版如何设置容器宽度自适应？

要实现大屏时容器仅占用列所需宽度、小屏时支持横向滚动的效果，需结合容器样式调整与AG Grid配置修改，具体方案如下：

1. 调整容器样式 #

修改包裹AG Grid的div样式，核心是让容器宽度由内容决定而非强制占满父容器：

const gridStyle = useMemo(() => ({
  height: '100%',
  width: 'auto',
  overflowX: 'auto',
  display: 'inline-block', // 关键：切换为行内块级元素，宽度跟随内容变化
  maxWidth: '100%' // 限制容器最大宽度为屏幕宽度，触发小屏横向滚动
}), []);

原样式中width: auto在块级元素下仍会占满父容器宽度，添加display: inline-block后，容器宽度将匹配内部AG Grid的实际宽度；maxWidth: 100%确保表格总宽度超出屏幕时，容器自动启用横向滚动。

2. 配置AG Grid并实现列宽自适应 #

通过AG Grid的API调用列宽适配方法，确保表格总宽度匹配列内容需求：

import { AgGridReact } from 'ag-grid-react';
import { useRef, useEffect } from 'react';

// 创建AG Grid的ref用于调用API
const gridRef = useRef<AgGridReact>(null);

// 组件挂载、数据更新或窗口 resize时，调整列宽适配内容
useEffect(() => {
  const gridApi = gridRef.current?.api;
  if (!gridApi) return;

  // 让列宽自动适配内容，表格总宽度为所有列宽度之和
  gridApi.sizeColumnsToFit();

  // 监听窗口 resize，重新调整列宽
  const handleResize = () => gridApi.sizeColumnsToFit();
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, [rowData, columnDefs]);

// JSX结构
<div style={gridStyle} className="ag-theme-alpine">
  <AgGridReact
    ref={gridRef}
    rowData={rowData}
    columnDefs={columnDefs}
    suppressScrollOnNewData={true} // 避免数据更新时自动滚动
  />
</div>

3. 可选：固定部分列宽度 #

若需指定部分列的固定宽度，可在columnDefs中单独设置width、minWidth或maxWidth，sizeColumnsToFit()会优先遵循这些配置，仅调整未指定宽度的列。

最终效果：

• 大屏且列数较少时，容器宽度匹配表格实际宽度，无右侧留白
• 小屏或列总宽度超出屏幕时，容器自动显示横向滚动条，保证内容可完整浏览

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