0

Is there a sort by date in the React data grid? If so, how can this be called? In the examples, all sorting works only on the line:

Example 1

Example 2

In example 2, there are columns with dates, but they are sorted as strings.

2 Answers 2

0

i have a solution that is really good but not great. really good in that it sorts perfectly but it isn't good if you also want to filter on the column as well.

Basically you are displaying the formated date with a custom formatter and the value you are passing to sort on is the the number of seconds from 1/1/1970 for each date so it will sort right.

And yes, i use functions instead of components for the formatter and headerRenderer values all the time and it works fine.

i work an an intranet so i can't just copy/paste my code so this is just hand typed but hopefully you get the idea.

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


}
0

I use react-table I was having the same issue, the solution in case, was to convert the date to a javaScript Date, and also return this as a JSon format, I have to format how the date render in the component. here is a link that shows how I did this. codesandbox sample

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.