如何以编程方式对 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>
  );
}