如何在React AG-Grid中设置列宽适配表头或内容？

一、让列宽适配表头内容 #

直接用AG-Grid提供的autoSizeColumns API，在表格初始化完成后调用，就能自动计算表头内容所需宽度，让表头完整显示：

const onGridReady = (params) => {
  // 适配所有列的表头宽度
  params.api.autoSizeColumns();
  // 若只需适配指定列，传入列key数组即可
  // params.api.autoSizeColumns(['startCol', 'middleCol', 'endCol']);
};

<AgGridReact
  onGridReady={onGridReady}
  columnDefs={[
    { field: 'start', headerName: 'Something Long Start' },
    { field: 'middle', headerName: 'Something Long Middle' },
    { field: 'end', headerName: 'Something Long End' }
  ]}
  // 其他配置项...
/>

二、让列宽适配表头与行数据中宽度较大的一方 #

autoSizeColumns API默认会同时计算表头和单元格内容的宽度，自动取两者中的最大值设置列宽。如果行数据是异步加载的，要等数据加载完成后再调用该API，确保计算准确：

import { useRef, useState, useEffect } from 'react';

const MyGrid = () => {
  const gridApi = useRef(null);
  const [rowData, setRowData] = useState([]);

  useEffect(() => {
    // 模拟异步获取数据
    const fetchData = async () => {
      const data = await fetch('/your-data-api');
      const res = await data.json();
      setRowData(res);
      // 数据加载完成后执行列宽适配
      gridApi.current?.autoSizeColumns();
    };
    fetchData();
  }, []);

  const onGridReady = (params) => {
    gridApi.current = params.api;
  };

  return (
    <AgGridReact
      ref={gridApi}
      onGridReady={onGridReady}
      columnDefs={[
        { field: 'start', headerName: 'Something Long Start' },
        { field: 'middle', headerName: 'Something Long Middle' },
        { field: 'end', headerName: 'Something Long End' }
      ]}
      rowData={rowData}
      // 其他配置项...
    />
  );
};

额外注意 #

• 如果列使用了自定义渲染组件，autoSizeColumns会自动识别渲染后的实际内容宽度。
• 若需要固定列宽的基准值，可以在columnDefs中设置width属性，再结合autoSizeColumns做调整，兼顾固定初始宽度和内容适配。

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