CODEWITHSUNDEEP
javascriptreactjstypescriptmaterial-uireact-typescript
Zaytt
Zaytt

Reputation: 113

How to sort a Material UI DataGrid column programatically?

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!

Upvotes: 9

Views: 13196

Answers (2)

Anirudh
Anirudh

Reputation: 1

Here's how i added default sort with DataGrid component:

<DataGrid
  initialState={{
    sorting: {
      sortModel: [{ field: 'rating', sort: 'desc' }],
    },
  }}
/>

Upvotes: 0

William Melo
William Melo

Reputation: 84

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

Upvotes: 6

Related Questions