日付で並べ替えるデータグリッド

Question

Reactデータグリッドには日付による並べ替えがありますか？もしそうなら、これはどのように呼び出すことができますか？例では、すべてのソートは行だけで動作します：

例2では

Example 1

Example 2

、そこに日付の列がありますが、それらは文字列としてソートされています。

Answer 1

私は本当に良いですが偉大ではない解決策を持っています。それが完全に並べ替えるという点では本当に良いですが、カラムでもフィルタリングしたいのであれば、それは良くありません。

基本的には、カスタムフォーマッタで書式設定された日付を表示し、並べ替えに渡す値は、日付ごとに1/1/1970からの秒数であるため、並べ替えが正しく行われます。

はい、私はいつもフォーマッタと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} 
     ... 
     /> 


}