Div表排序控制/使用React进行排序

Question

我有一个从</div>创建的表，每一行都映射到一个“表头” </th>上，但这也是一个div表。这些行被映射并属于自己的组件。我希望能够单击表标题，并按desc和asc对映射的行进行排序。

我不确定如何执行此操作，因为A：行已映射，需要关联到另一个视图上的标题，B：B不是传统表格-我正在使用div。我正在与redux，lodash和其他各种库一起使用React。

这是一个简单的示例，其中包含我所拥有的代码：https://codesandbox.io/s/842roor210

<React.Fragment>
  <div class="contact-item ripple row no-gutters align-items-center py-2 px-3 py-sm-4 px-sm-6">
    <div className="col px-1 text-truncate font-weight-bold text-uppercase">
      Name
    </div>
    <div className="col text-truncate px-1 d-none d-lg-flex font-weight-bold text-uppercase">
      Durability
    </div>
    <div className="col text-truncate px-1 d-none d-lg-flex font-weight-bold text-uppercase">
      Speed
    </div>
    <div className="col text-truncate px-1 font-weight-bold text-uppercase">
      Fitness
    </div>
    {coachReport.player.map((player, i) => (
      <CoachReportRow
        key={i}
        firstname={player.firstName}
        lastname={player.lastName}
        durabilityscore={player.durabilityScore}
        speed={player.speed}
        fitness={player.fitness}
      />
    ))}
  </div>
</React.Fragment>;

然后

const CoachReportRow = props => {
  return (
    <React.Fragment>
      <div className="col-12 contact-item ripple row no-gutters align-items-center py-2 px-3 py-sm-2 px-sm-6">
        <div className="col px-1 text-truncate">
          {props.firstname} {props.lastname}
        </div>
        <div className="col px-1 text-truncate">{props.durabilityscore}</div>
        <div className="col px-1 text-truncate">{props.speed}</div>
        <div className="col px-1 text-truncate">{props.fitness}</div>
      </div>
    </React.Fragment>
  );
};