Hello I have a DataGrid with a column that has a custom header. This header is a Select. What I want to do is every time the user selects an option the column should be sorted desc. The renderHeader looks like this
renderHeader: (params) => {
return <CategoryPickerHeader value={category} handleChange={setCategory} />;
},
I know the DataGrid api has a couple methods for sorting (https://v4.mui.com/api/data-grid/grid-api/#main-content) sortColumn() & applySorting()
But I haven't found any example of how to use those api methods.
Can someone provide an example or knows how to use the DataGrid api?
Thanks in advance!
Visit this page, this has an example: https://codesandbox.io/s/ugeb8?file=/demo.js
IMPORTANT : pass the arguments to property sortModel, is this answer
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
export default function BasicSortingGrid() {
const { data } = useDemoData({
dataSet: 'Commodity',
rowLength: 10,
maxColumns: 6,
});
const [sortModel, setSortModel] = React.useState([
{
field: 'commodity',
sort: 'asc',
},
]);
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
sortModel={sortModel}
onSortModelChange={(model) => setSortModel(model)}
/>
</div>
);
}