Material UI默认表格排序

Question

我有一个展示数据的Material UI表格。我希望能够按平均值从低到高对表格进行排序。是否有默认的方法可以实现？例如在表格在浏览器中加载时自动排序。这是我的表格和一些数据，我希望平均列按从低到高排序，因此平均值最低的人会排在最上面。

const data = [
    {
      Name: "A Person",
      Attendence: [
        {
          date: "2019/12/01",
          attendence: 1
        },
        {
          date: "2019/12/02",
          attendence: 1
        },
        {
          date: "2019/12/03",
          attendence: 0
        },
        {
            date: "2019/12/04",
            attendence: 0
          },
          {
            date: "2019/12/05",
            attendence: 0.25
          },
          {
            date: "2019/12/06",
            attendence: 0.75
          },
          {
            date: "2019/12/07",
            attendence: 0.25
          },
          {
            date: "2019/12/08",
            attendence: 0.25
          },
          {
            date: "2019/12/09",
            attendence: 0
          },
          {
            date: "2019/12/10",
            attendence: 0
          },

      ],
]








function Register(props) {
  const classes = useStyles();


  const data = props.attendence.map(attendence => (
    attendence.average
  ))



  // const classes = useStyles();
  return (
    <React.Fragment>
         <Paper >
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right"> Average </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.attendence.map(attendence => (
            <TableRow key={attendence.Name}>
              <TableCell component="th" scope="row">
                {attendence.Name}
              </TableCell>
              {attendence.Attendence.map(personAttendence => {
                  return (
                    <TableCell align="right">{personAttendence.attendence}</TableCell>
              )
            })}
               <TableCell align="right" >{attendence.average}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>           
        </React.Fragment>
  );
            }

- TEbogo

Answer 1

根据排序文档，

引用了这样一段话:

“可以使用GridColDef接口的sortModel属性预配置已排序的列:”

在我的情况下，当表格加载时需要对名为“email”的列进行排序，如下所示:

const [sortModel, setSortModel] = React.useState([
  {
    field: 'commodity',
    sort: 'asc',
  },
]);

<DataGrid
  {...data}
  sortModel={sortModel}
  onSortModelChange={(model) => setSortModel(model)}
/>

注意：如果您提供了sortModel，则必须同时提供一个setState bucket以更新排序模型状态。

- Tushar Zagade

---

这个解决方案对我没有用。因为即使sortModel没有改变，onSortModelChange也会被递归调用。 - Sergey Gurin

Answer 2

更新

Material UI现在包含一个DataGrid组件，该组件默认添加了排序功能。感谢@John Vandivier指出这一点。

原始答案

是的！最简单的方法就是在将数据传递给组件之前对数据进行排序：

const data = [{ average: 3 }, {average: 8}, {average: 2}];
const sortedData = data.sort((a, b) => a.average - b.average);

请注意，Material UI表格没有内置排序功能，因为它们不会为您存储状态。您可以使用Material UI提供的组件添加排序功能。文档中有一个很好的示例，演示如何实现排序：链接。希望这能帮到你！

- jack.benson

---

我认为你提供的文档并不是一个好的例子。它过于复杂，仅为了在表格视图上启用排序功能。有没有其他更简单的例子可用？ - iedmrc

请使用以下链接查看排序演示。它非常简单易用，适合我使用。 https://codesandbox.io/s/wznq5xn628?file=/src/index.js:2454-2458 - S0haib Nasir

这是一个很棒的答案！有几个相关的评论：1. DataGrid 是一种类似于 Table 的材料组件，但它具有内置的排序功能。2. 使用 DataGrid，您可以覆盖 renderCell 来实现自定义外观和 valueGetter，这将被 Material 用于底层排序功能！ - John Vandivier

感谢@S0haibNasir。我认为文档对开发人员来说有点过于复杂了。我正准备开始实现这个解决方案，然后看到了你的评论。 :) - Tevin Morake

Answer 3

这个解决方案对我有效：

const [sortModel, setSortModel] = React.useState([
  {
    field: 'commodity',
    sort: 'asc',
  },
]);

<DataGrid
  {...data}
  sortModel={sortModel}
  onSortModelChange={(newSortModel) => {
    if (newSortModel.length !== sortModel.length) {
      setSortModel(newSortModel);
      return;
    }
    newSortModel.forEach((element, index) => {
      if (
        element.field !== sortModel[index].field ||
        element.sort !== sortModel[index].sort
      ) {
        setSortModel(newSortModel);
      }
    });
   }}
/>

- Sergey Gurin