CODEWITHSUNDEEP
reactjsmaterial-uidatagrid
Hakob Sargsyan
Hakob Sargsyan

Reputation: 21

How to reset column ordering on Mui Data Grid?

I want to reset column ordering:

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

I have tried to use separated setters from the Data Grid Pro API, but it doesn't help me.

Upvotes: 2

Views: 820

Answers (1)

Nolle
Nolle

Reputation: 261

Try this:

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

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

Upvotes: 0

Related Questions