Javascript 在React数据网格中按日期排序

React数据网格中是否有按日期排序？如果是的话，这怎么叫？在示例中，所有排序仅在该行上工作：

---

在示例2中，有带日期的列，但它们是按字符串排序的。

我有一个非常好但不太好的解决方案。非常好，因为它的排序非常完美，但如果您还想在列上进行过滤，那么它就不好了

基本上，您使用自定义格式化程序显示格式化的日期，传递给排序的值是每个日期从1970年1月1日起的秒数，因此它将正确排序

是的，我一直使用函数而不是组件来处理formatter和headerRenderer的值，而且效果很好

我在一个内部网工作，所以我不能只是复制/粘贴我的代码，所以这只是手工输入的，但希望你能理解

class GridUtil {

  static basicTextCell = (props)=>{
    return (<span>{props.value? props.value : ""}</span>)
   }
}


class AGridWrapper extends React.Component {

   ///////////////
   constructor(props){
     super(props);
     this.state={...}

     this.columnHeaderData = [
       {
         key: "dateCompleted",
         name: "Date Completed",
         formatter: (data)=>GridUtil.basicTextCell({value: data.dependentValues.dateCompletedFormatted}),
         getRowMetaData: (data)=>(data),
         sortable: true
       }
     ];

    }//end constructor

    ///////////////////////////////////
    //Note that DateUtil.getDisplayableDate() is our own class to format to MM/DD/YYYY
    formatGridData = !props.inData? "Loading..." : props.inData.map(function(obj,index){
      return {
       dateCompleted: rowData.compDate? new Date(rowData.compDate).getTime() : "";
       dateCompletedFormatted: rowData.compDate? DateUtil.getDisplayableDate(rowData.compDate) : "";
     }

   });

   //////////
   rowGetter = rowNumber=>formatGridData[rowNumber];

   /////////    
   render(){

    return (
      <ReactDataGrid
       columns={this.columnHeaderData}
       rowGetter={this.rowGetter}
       rowsCount={this.formatGridData.length}
       ...
      />


}

类GridUtil{
静态basicTextCell=（道具）=>{
返回（{props.value？props.value:”“}）
}
}
类AGridWrapper扩展了React.Component{
///////////////
建造师（道具）{
超级（道具）；
this.state={…}
this.columnHeaderData=[
{
键：“dateCompleted”，
名称：“完成日期”，
格式化程序：（数据）=>GridUtil.basicTextCell（{value:data.dependentValues.dateCompletedFormatted}），
getRowMetaData：（数据）=>（数据），
可排序：正确
}
];
}//端构造函数
///////////////////////////////////
//请注意，DateUtil.getDisplayableDate（）是我们自己的类，可以格式化为MM/DD/YYYY
formatGridData=！props.inData？“正在加载…”：props.inData.map（函数（obj，索引）{
返回{
dateCompleted:rowData.compDate？新日期（rowData.compDate）.getTime（）：“”；
dateCompletedFormatted:rowData.compDate？DateUtil.getDisplayableDate（rowData.compDate）：“”；
}
});
//////////
rowGetter=rowNumber=>formatGridData[rowNumber]；
/////////    
render（）{
返回(
}

我使用react table时遇到了同样的问题，案例中的解决方案是将日期转换为javaScript日期，并以JSon格式返回，我必须格式化日期在组件中的呈现方式。下面是一个链接，展示了我是如何做到这一点的。