How to sort a Material UI DataGrid column programatically?

user_14187882 0
Viewed 3842

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!

react-typescript material-ui typescript reactjs javascript
1 Answers

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

user_176849920
Related