排序功能不排序表

Question

我有一个可以接收信息的表格，但是我希望允许用户单击表格标题，以便对信息进行排序。我将此表格作为材料UI的设计和模板的表格，您可以在此处找到，我认为我的问题可能在于我需要将一些功能作为道具传递给我的供应商组件，或者也许我完全错过了一个功能，任何建议都将得到极大的重视

Template Table

我的代码在

下方

   const SuppliersTable = (props) => {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [order, setOrder] = useState('desc');
  const [orderBy, setOrderBy] = useState('');

  function stableSort(array, cmp) {
    const stabilizedThis = array.map((el, index) => [el, index]);
    stabilizedThis.sort((a, b) => {
      const order = cmp(a[0], b[0]);
      if (order !== 0) return order;
      return a[1] - b[1];
    });
    return stabilizedThis.map(el => el[0]);
  }

  function desc(a, b, orderBy) {
    if (b[orderBy] < a[orderBy]) {
      return -1;
    }
    if (b[orderBy] > a[orderBy]) {
      return 1;
    }
    return 0;
  }

  function getSorting(order, orderBy) {
    return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
  }

  function handleRequestSort(event, property) {
    const isDesc = orderBy === property && order === 'desc';
    setOrder(isDesc ? 'asc' : 'desc');
    setOrderBy(property);
  }

  function handleChangePage(event, page) {
    setPage(page);
  }

  function handleChangeRowsPerPage(event) {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  }


  const handleClick = (id) => {
    props.history.push(`/suppliers/${id}/details`);
  };


  const { classes, filteredSuppliers } = props;
  const emptyRows = rowsPerPage - Math.min(rowsPerPage, filteredSuppliers.length - page * rowsPerPage);
  return (
    <Paper className={classes.root}>
      <div className={classes.tableWrapper}>
        <Table className={classes.table} aria-label="tableTitle" id="suppliersTable">
          <SuppliersTableHead
            order={order}
            orderBy={orderBy}
            onRequestSort={handleRequestSort}
            rowCount={filteredSuppliers.length}
          />
          <TableBody aria-label="suppliers Table">
            {stableSort(filteredSuppliers, getSorting(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map(supplier => {
                return (
                  supplier.addressInfo.map(row => (
                    <TableRow className={classes.tableRow}
                      hover={true}
                      // onClick={() => { handleClick(supplier.id); }} for a later ticket
                      tabIndex={0}
                      key={row.id}
                    >
                      <TableCell component="th" scope="row" padding="none">{supplier.name}</TableCell>
                      <TableCell padding="none">{row.officeName}</TableCell>
                      <TableCell padding="none">{row.officeEmail}</TableCell>
                      <TableCell padding="none">{row.officeTelephone}</TableCell>
                      <TableCell padding="none">{row.town}</TableCell>
                      <TableCell padding="none">{row.county}</TableCell>
                      <TableCell padding="none">{row.postcode}</TableCell>
                    </TableRow>
                  ))
                );
              })}
            {emptyRows > 0 && (
              <TableRow style={{ height: 49 * emptyRows }}>
                <TableCell colSpan={8} />
              </TableRow>
            )}
          </TableBody>
        </Table>
        <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          count={filteredSuppliers.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={handleChangePage}
          onChangeRowsPerPage={handleChangeRowsPerPage}
        />
      </div>
    </Paper>
  );
};

export default withStyles(styles)(SuppliersTable);


const rows = [
  { id: 'title', numeric: false, disablePadding: true, label: 'Title' },
  { id: 'office', numeric: false, disablePadding: true, label: 'Office' },
  { id: 'email', numeric: false, disablePadding: true, label: 'Email' },
  { id: 'telephone', numeric: false, disablePadding: true, label: 'Telephone' },
  { id: 'town', numeric: false, disablePadding: true, label: 'Town' },
  { id: 'county', numeric: false, disablePadding: true, label: 'County' },
  { id: 'postCode', numeric: false, disablePadding: true, label: 'Post Code' },
];



const SuppliersTableHead = props => {
  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
  const createSortHandler = property => event => {
    onRequestSort(event, property);
  };


  return (
    <TableHead>
      <TableRow>
        {rows.map(row => (
          <TableCell
            key={row.id}
            align={row.numeric ? 'right' : 'left'}
            padding={row.disablePadding ? 'none' : 'default'}
            sortDirection={orderBy === row.id ? order : false}
          >
            <TableSortLabel
              active={orderBy === row.id}
              direction={order}
              onClick={createSortHandler(row.id)}
            >
              {row.label}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
};

SuppliersTableHead.propTypes = {
  onRequestSort: PropTypes.func.isRequired,
  order: PropTypes.string.isRequired,
  orderBy: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired,
};

export default SuppliersTableHead;