Dynamic Sorting and queries in Meteor - React

help
1

Hello,

I need help with performing a dynamic sorting and filtering with my Meteor Application using React.

What i have is a react component:

class DocumentList extends Component {
     
    sortHandler(sortField, sortDirection){
       // sorting codes here. will be executed when columns is clicked.

    }

    render(){
     //Render list of document here
    }

}

export default withTracker(()=>{
    Meteor.subscribe('documents');
   return{
      documents
  }
})(DocumentList)

Is there a way I can hookup the sortHandler so I can “re-subscribe” to and get a new data sorted according to what the user set (sort name ascending, sort name descending)

Thanks a lot

1 Like
2

I was able to figure this out using reactive-var. Here is what I did:

import {ReactiveVar} from 'meteor/reactive-var';

const sort = new ReactiveVar({createdAt: -1});  //default sorting for createdAt
class Documents extends Component{

   sortHandler(sortField, sortDirection){
       //change the sort value here using sort.set({sortField: sortDirection})
       // Obviously you cannot assigned sortField as the object key, what I did is case statement.
    }

}

export default withTracker((props)=>{
    Meteor.subscribe('documents');
    return{
        orders: Orders.find({}, {sort: sort.get()}).fetch()
    }
})(Documents);

every time a change is sort reactive-var is triggered, the withTracker also triggered getting new data based on sort parameters.