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

Question

React 数据网格中是否有按日期排序？如果是这样，这怎么叫？在示例中，所有排序仅适用于该行：

示例 1

示例 2

在示例 2 中，有包含日期​​的列，但它们被排序为字符串。

Answer 1

我使用 react-table 我遇到了同样的问题，以防万一，解决方案是将日期转换为 javaScript 日期，并将其作为 JSon 格式返回，我必须格式化日期在组件中的呈现方式。这是一个链接，显示了我是如何做到这一点的。 代码沙盒示例

Answer 2

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

基本上，您使用自定义格式化程序显示格式化的日期，并且您传递的排序值是每个日期从 1/1/1970 开始的秒数，因此它将正确排序。

是的，我一直对格式化程序和 headerRenderer 值使用函数而不是组件，并且它工作正常。

我在一个 Intranet 上工作，所以我不能只是复制/粘贴我的代码，所以这只是手工输入的，但希望你能明白。

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


}