如何在MUI数据网格上重置列排序？

Question

我想重置列排序：

import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGridPro } 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,
    });

    const resetOrdering = () => {
        // I need to get ordering state and reset it by default
    }

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

我试图使用与数据网格Pro API的分离设置器，但这对我没有帮助。

Answer 1

export default function DataGridProDemo() {
    const [sortModel, setSortModel] = useState<GridSortModel>([]);
    ...
    const resetOrdering = () => {
        setSortModel([])
    }

    return (
        ...
        <DataGridPro
            ...
            sortModel={sortModel}
            onSortModelChange={(newSortModel) => setSortModel(newSortModel)}
        />
        ...
    );
}