reactjs 如何重置Mui数据网格上的列排序?

2uluyalo  于 2023-11-18  发布在  React
关注(0)|答案(1)|浏览(98)

我想重置列排序:

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>
    );
}

字符串
我曾尝试使用与Data Grid Pro API分离的setter,但这对我没有帮助。

xcitsw88

xcitsw881#

试试这个:

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

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

字符串

相关问题