我如何在 React Js 的 Material UI 表组件中按“DateAdded”对表进行排序？

Question

我在我的 React 项目中使用 Material UI 的 Table 组件。我有多个列，其中包括该日期添加的记录。如何根据添加记录的日期对表格进行排序？我正在接收 UNIX 时间戳并将其转换为 mm/dd/yyyy 格式以方便阅读。

我正在使用 Materila -ui Table 组件： https: //material-ui.com/demos/tables/

我尝试将日期数组传递给排序函数，但它没有成功，因为它期望包含所有列的数组。

预期的行为是，当我单击添加日期列附近的排序图标时，它应该根据添加日期对表进行升序或降序排序。

function desc(a, b, orderBy) {
  console.log(a.addedDate)
  if (b.addedDate < a.addedDate) {
    console.log(b.addedDate)
    return -1;
  }
  if (b.addedDate > a.addedDate) {
    return 1;
  }
  return 0;
}

    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 getSorting(order, orderBy) {
      return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => 
    -desc(a, b, orderBy);
    }

    const rows = [
      { id: 'id', numeric: false, label: 'ID'},
      { id: 'lastname', numeric: true, label: 'lastname' },
      { id: 'firstname', numeric: true, label:'firstname' },
      { id: 'email', numeric: true, label: 'email'},
      { id: 'dateadded', numeric: true, label: 'dateadded' }
     ];


    class EnhancedTableHead extends React.Component {
      createSortHandler = property => event => {
        this.props.onRequestSort(event, property);
      };

      render() {
        const { onSelectAllClick, order, orderBy, numSelected, rowCount } 
    = this.props;

    return (
      <TableHead>
        <TableRow>
          <TableCell padding="checkbox">
            <Checkbox
              indeterminate={numSelected > 0 && numSelected < rowCount}
              checked={numSelected === rowCount}
              onChange={onSelectAllClick}
            />
          </TableCell>
          {rows.map(
            row => (
              <TableCell
                key={row.id}
                align={row.numeric ? 'right' : 'left'}
                padding={row.disablePadding ? 'none' : 'default'}
                sortDirection={orderBy === row.id ? order : false}
              >
                <Tooltip
                  title="Sort"
                  placement={row.numeric ? 'bottom-end' : 'bottom-start'}
                  enterDelay={300}
                >
                  <TableSortLabel
                    active={orderBy === row.id}
                    direction={order}
                    onClick={this.createSortHandler(row.id)}
                  >
                    {row.label}
                  </TableSortLabel>
                </Tooltip>
              </TableCell>
            ),
            this,
          )}
        </TableRow>
      </TableHead>
    );
      }
    }

My Table Body looks like following:

     <TableBody>
                  {stableSort(data, getSorting(order, orderBy).slice(page* rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(n => {
                  var convertedTimeStamp;
                  var d = new Date(n.addedDate);
                  convertedTimeStamp = d.toLocaleDateString();
                  if (n.nuid.indexOf(this.state.filterText) === -1 ) {
                    return;
      }
                  return (
                    <TableRow
                      hover

                      tabIndex={-1}
                      key={n.id}
                    >
                      <TableCell padding="checkbox">
                      </TableCell>
                      <TableCell component="th" scope="row" padding="none">
                          {n.id}
                      </TableCell>
                      <TableCell align="left">{n.lastName}</TableCell>
                      <TableCell align="left">{n.firstName}</TableCell>
                      <TableCell align="left">{n.email}</TableCell>
                      <TableCell align="right">{convertedTimeStamp} . 
   </TableCell>

                        </TableRow>
                      );
                    })}

            </TableBody>