Question

我认为这是一个简单的问题，但是由于我没有课程，因此我正在努力了解如何做到这一点。我试图使该表可排序。我希望能够基于单击的列进行排序。我需要添加课程吗？我对ReactJS很陌生。感谢您的帮助！

function CreateGradeTable(props) {

    return (
        <div>
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell className={props.tHead}>Student</TableCell>
                    <TableCell className={props.tHead}>Course</TableCell>
                    <TableCell className={props.tHead}>Term</TableCell>
                    <TableCell className={props.tHead}>Grade</TableCell>
                    <TableCell className={props.tHead}>Final</TableCell> 
                </TableRow>
            </TableHead>
            <TableBody>
                {props.data.map((gradeDetail, i) => {
                  const {
                    gradeId,
                    courseName,
                    courseId,
                    studentName,
                    studentId,
                    courseTerm,
                    grade,
                    finalGradeForTerm,
                  } = gradeDetail;
                  return (
                      <TableRow
                        key={gradeId}
                        className={`${props.tRow} ${i % 2 !== 0 ? props.striped : ''}`}
                      >
                          <TableCell>
                              <Link to={`/student/${studentId}`}>
                                  <StyledLink>{studentName}</StyledLink>
                              </Link>
                          </TableCell>
                          <TableCell>
                              <Link to={`/course/${courseId}`}>
                                  <StyledLink>{courseName}</StyledLink>
                              </Link>
                          </TableCell>
                          <TableCell align="left">{courseTerm}</TableCell>
                          <TableCell align="left">{grade}</TableCell>
                          <TableCell align="left">{finalGradeForTerm}</TableCell>
                      </TableRow>
                  );
                })}
            </TableBody>
        </Table>
    </div>
    );

        }

Answer 1

我看到您正在使用Material-UI来显示表格。您需要使用“ TableSortLabel”来显示页眉。这也会显示上升/下降箭头。然后在TableSortLabel上编写onClick处理程序以更改状态，从而触发重新渲染。

在此处查看工作示例

https://codesandbox.io/s/condescending-beaver-q0owe?fontsize=14

 <TableBody>

                {

                    props.data.sort(order === 'asc'? ascCompare: desCompare ).map((gradeDetail, i) => {
                  const {
                      grade,
                    courseName,
                    studentName,
                  } = gradeDetail;
                  return (
                      <TableRow
                        key={i}
                      >
                          <TableCell align="left">{grade}</TableCell>
                          <TableCell align="left">{studentName}</TableCell>
                          <TableCell align="left">{courseName}</TableCell>
                      </TableRow>
                  );
                })}
            </TableBody>

如何使该表可排序？

1 个答案: