Material UI 默认表格排序

Question

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

Answer 1

更新

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 中提供的组件添加排序。文档中有一个关于如何执行此操作的很好的示例。

希望有帮助！

Answer 2

根据有关排序的文档，

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

就我而言，我有电子邮件的列名称，在表加载时需要对其进行排序，如下所示：

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

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

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