Material UI 默认表格排序答案

【问题标题】：Material UI default table sortMaterial UI 默认表格排序
【发布时间】：2020-01-15 12:59:38
【问题描述】：

我有一个显示一些数据的材质 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>
  );
            }

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

更新

Material UI 现在包含一个DataGrid 组件，它添加了sorting by default。感谢@John Vandivier 指出这一点。

原始答案

是的！最简单的方法是在将其提供给您的组件之前发送sort your data：

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

请注意，Material UI 表没有任何内置的排序功能，因为它们不会为您存储状态。您可以使用 Material UI 中提供的组件添加排序。如何做到这一点有a good example in the docs。

希望有帮助！

【讨论】：

我认为您在此处提供的文档不是一个很好的例子。仅仅为了在表格视图上进行排序就超级超级复杂了。有人有另一个简单的例子吗？
使用以下链接进行排序演示。它很简单，对我有用codesandbox.io/s/wznq5xn628?file=/src/index.js:2454-2458
这是一个很好的答案！几个相切的 cmets： 1. DataGrid 是一个类似于 Table 的材质组件，但它确实具有内置排序功能。 2. 使用 DataGrid，您可以覆盖 renderCell 以完成自定义外观和 valueGetter，这将被材料用于底层排序功能！
谢谢@S0haibNasir。我认为文档对于开发人员来说过于复杂了。我正要开始为此实施解决方案，您的评论就在这里。 :)

【解决方案2】：

根据the documentation on sorting，

可以使用GridColDef 接口的sortModel 属性预先配置排好序的列：

在我的情况下，我有电子邮件的列名，当表格加载时需要对其进行排序，如下所示：

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

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

注意：如果您提供 sortModel，则必须提供 setState 存储桶来更新排序模型状态

【讨论】：