javascript - How to sort a Material UI DataGrid column programatically? - Stack Overflow

admin管理员组

文章数量:1298180

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 () 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!

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./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!

• javascript
• reactjs
• typescript
• material-ui
• react-typescript

Share Improve this question Follow asked Dec 15, 2021 at 18:27 ZayttZaytt 11311 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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: 'modity',
      sort: 'asc',
    },
  ]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        sortModel={sortModel}
        onSortModelChange={(model) => setSortModel(model)}
      />
    </div>
  );
}

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

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

本文标签： javascriptHow to sort a Material UI DataGrid column programaticallyStack Overflow