Question

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

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

我尝试将Dates数组传递给sort函数，但是由于它期望包含所有列的数组，因此无法正常工作。

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

from itertools import combinations 

name_list = []

for i in range(0,20):
    name = raw_input('Add up to 20 names.\nWhen finished, enter "Done" to see all first and middle name combinations.\nName: ')
    name_list.append(name)
    if name != 'Done':
        print(name_list)
    else:
        name_list.remove('Done')
        break

for i in range(len(name_list) + 1):
    print(list(combinations(name_list, i)))
    print("\n")

我的表主体如下：

function desc(a, b, orderBy) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    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>
);
  }
}

 <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} .

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

0 个答案: