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

Posted 2023-02-22

【中文标题】如何以编程方式对 Material UI DataGrid 列进行排序？

【英文标题】：How to sort a Material UI DataGrid column programatically?

【发布时间】：2022-01-18 22:19:40

【问题描述】：

您好，我有一个 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？

提前致谢！

【参考方案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>
  );

【讨论】：

谢谢！但这并不完全是我所要求的。我需要知道的是如何使用 DataGrid api 中的排序方法，因为我打算覆盖默认行为

告诉我你想做什么？

我想知道如何使用 params.api.sortColumn(); dataGrid 列的 renderHeader 方法的 api 中包含的方法。我想要那个，因为我想在每次触发 handleChange 时自动降序排序

看看这个，也许你能找到对你有帮助的东西：material-ui-x.netlify.app/storybook/?path=/story/…