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

Question

您好，我有一个 DataGrid，其中有一列具有自定义标题。此标头是一个选择。 我想要做的是每次用户选择一个选项时，该列应该按降序排序。 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>
  );
}