如何解决MUI X Data Grid Premium列自动调整大小无需setTimeout的问题

问题场景 #

使用DataGridPremium时，已配置autosizeOptions属性，但网格列无法根据内容自动适配；仅当将apiRef.current.autosizeColumns(autosizeOptions)包裹在setTimeout中才能生效，希望找到不依赖setTimeout的解决方案。

核心原因 #

直接在useEffect中调用autosize方法时，网格组件可能尚未完成列和行的渲染与布局计算，导致autosize无法获取正确的内容尺寸。setTimeout本质是靠延迟等待网格渲染完成，但这种方式不可靠且影响体验。

解决方案 #

利用MUI DataGrid提供的内置生命周期事件，确保在网格完成列、行的渲染与布局后再执行自动调整列宽的操作，替代setTimeout。

具体实现思路

通过useGridApiEventHandler监听网格的rowsSet和columnsSet事件，这两个事件会在网格的行、列数据完成设置并准备好渲染时触发，此时调用autosizeColumns能确保获取到正确的内容尺寸。

修改后的完整代码 #

import { DataGridPremium, useGridApiRef, useGridApiEventHandler, GridEvents } from '@mui/x-data-grid-premium';
import React, { useEffect, useState } from 'react';
import { setVariantTableColumns, setVariantTableRows } from '../../data/variantTableRender';

const autosizeOptions = {
    columns: ["SYNM"],
    includeHeaders: true,
    includeOutliers: true
};

export const VariantTable = ({ data }) => {
    const [variantColumns, setVariantColumns] = useState([]);
    const [variantRows, setVariantRows] = useState([]);
    const apiRef = useGridApiRef();

    useEffect(() => {
        if (data && data.Layout) {
            const oColumns = setVariantTableColumns(data.Layout);
            if (oColumns) {
                setVariantColumns(oColumns);
            }
        }
        if (data && data.Data) {
            const oRows = setVariantTableRows(data.Data);
            if (oRows) {
                setVariantRows(oRows);
            }
        }
    }, [data]);

    // 监听行数据设置完成事件
    useGridApiEventHandler(apiRef, GridEvents.rowsSet, () => {
        apiRef.current.autosizeColumns(autosizeOptions);
    });

    // 监听列定义设置完成事件
    useGridApiEventHandler(apiRef, GridEvents.columnsSet, () => {
        apiRef.current.autosizeColumns(autosizeOptions);
    });

    return (
        variantColumns.length && variantRows.length &&
        <DataGridPremium
            apiRef={apiRef}
            rows={variantRows}
            columns={variantColumns}
            density="compact"
            autosizeOptions={autosizeOptions}
        />
    );
};

额外说明 #

• 移除了原代码中的autosizeOnMount={true}，因为初始挂载时数据未就绪，该配置无法生效；改用数据加载完成后的事件触发autosize更可靠。
• 如果需要避免重复触发autosize，可添加isAutosized状态标记，仅在首次数据加载完成时执行一次操作。

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