如何重置MUI DataGrid Pro的列排序状态？

要实现重置列排序状态，你需要借助DataGrid的apiRef调用内置的排序模型设置方法，具体步骤如下：

1. 引入useGridApiRef钩子：从@mui/x-data-grid-pro中导入该钩子，用于获取DataGrid的API实例。
2. 创建API引用实例：在组件内部调用useGridApiRef()生成apiRef。
3. 传递apiRef给DataGridPro：将apiRef作为props传入DataGridPro组件。
4. 在重置函数中调用setSortModel：通过apiRef.current.setSortModel([])清空排序模型，恢复到默认无排序的状态。

修改后的完整代码如下：

import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function DataGridProDemo() {
    const { data } = useDemoData({
        dataSet: 'Commodity',
        rowLength: 100000,
        editable: true,
    });
    
    // 创建API引用
    const apiRef = useGridApiRef();

    const resetOrdering = () => {
        // 清空排序模型，重置排序状态
        apiRef.current.setSortModel([]);
    }

    return (
        <Box sx={{ height: 520, width: '100%' }}>
            <button onClick={resetOrdering} > Reset </button>
            <DataGridPro
                apiRef={apiRef} // 传递API引用
                {...data}
                loading={data.rows.length === 0}
                rowHeight={38}
                checkboxSelection
                disableSelectionOnClick
                experimentalFeatures={{ newEditingApi: true }}
            />
        </Box>
    );
}

补充说明 #

如果你的表格有默认排序配置（比如初始就按某列排序），可以把setSortModel的参数改成你的默认排序数组，例如：

apiRef.current.setSortModel([{ field: 'your-default-column', sort: 'asc' }]);

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