Meteor React pagination

react
1

Hello! Can someone tell me how create pagination with meteor and react. Read docs, but not understand how it’s work.
Regards, Evgeny.

2

Are you attempting to use reactive data (publication/subcription) or a meteor method?

3

I want to use publication/subcription with withTracker. But methods will be ok too.
Ideally i want get Next/Previous buttons. But really don’t know how to do this.

4

So your publication will look something like this:

Meteor.publish('dataToPaginate', function({ pageSize, page }) {
  check(pageSize, Number);
  check(page, Number);

  const options = {
    limit: pageSize,
    skip: (pageSize * page),
    sort: { ... } // sort is required
  };

  return Collection.find({}, options);

And you’ll probably have a component to select what page you’re on (psuedocode):

class Paginator extends React.Component {
  state = {
    page: 0,
    pageSize: 10,
  }

  render() {
    const { page, pageSize } = this.state;
    return (
      <CollectionDisplay page={page} pageSize={pageSize} />
      <button onClick={() => set page -1}>Back</button>
      <button onClick={() => set page +1}>Next</button>
    );
  }
}

Then your withTracker component

const CollectionDisplay = ({ isLoading, documents }) => {
  if (isLoading) return 'loading...';
  return documents.map(document => //....
};

export default withTracker(({ pageSize, page }) => {
  const subscriptionHandle = Meteor.subscribe('dataToPaginate', { pageSize, page });

  return {
    isLoading: !subscriptionHandle.ready(),
    documents: Collection.find({}),
  };
})(CollectionDisplay);

The downside to this is it’s difficult to disable the next button once there are no more documents to fetch… I may have coded myself into a corner here, but hopefully it’s useful. The method way would be similar, and you could also return what the max page it… Hope this helps.

6 Likes
5

Wow! It’s really helps! Thank you!