reactjs - Wie kann man eine MUI X Data Grid-Spalte programmatisch sortieren?

Hallo, ich habe ein DataGrid mit einer Spalte, die einen benutzerdefinierten Header hat. Dieser Header ist ein Select. Was ich tun möchte, ist, dass jedes Mal, wenn der Benutzer eine Option auswählt, die Spalte absteigend sortiert wird. Das renderHeader sieht so aus

renderHeader: (params) => {
    return <CategoryPickerHeader value={category} handleChange={setCategory} />;
  },

Ich weiß, dass die DataGrid-API ein paar Methoden zum Sortieren hat (https://v4.mui.com/api/data-grid/grid-api/#main-content) sortColumn() & applySorting()

Aber ich habe kein Beispiel gefunden, wie man diese API-Methoden verwendet.

Kann jemand ein Beispiel geben oder weiß, wie man die DataGrid-API benutzt?

Vielen Dank im Voraus!

Antwort #1

Besuche diese Seite, dies hat ein Beispiel: https://codesandbox.io/s/ugeb8?file=/demo.js

WICHTIG: Übergeben Sie die Argumente an die Eigenschaft sortModel, ist dies die Antwort

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

Antwort #2

So habe ich die Standardsortierung mit der DataGrid-Komponente hinzugefügt:

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