javascript - 如何以编程方式对 Material UI DataGrid 列进行排序？

Question

您好，我有一个 DataGrid，其中有一列具有自定义标题。此 header 是一个选择。
我想要做的是每次用户选择一个选项时，该列应该按降序排序。
renderHeader 看起来像这样

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

我知道 DataGrid api 有几种排序方法 ( https://v4.mui.com/api/data-grid/grid-api/#main-content) sortColumn() & applySorting()
但我还没有找到任何关于如何使用这些 api 方法的例子。
有人可以提供一个例子或知道如何使用 DataGrid api吗？
提前致谢!

Answer 1

访问这个页面，这有一个例子:
https://codesandbox.io/s/ugeb8?file=/demo.js
重要提示:将参数传递给属性 sortModel，是这个答案

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