reactive-table icon indicating copy to clipboard operation
reactive-table copied to clipboard

Infinite Scroll

Open Herteby opened this issue 9 years ago • 4 comments

Do you have any suggestion for what the neatest way of implementing infinite scroll for reactive-table might be? What if I simply set rowsPerPage to a reactive var that I increase when the user reaches the bottom? (And disable the navigation ofc) Would that work fine using the server-side pagination as well?

It would a sweet feature to put into the package btw!

Herteby avatar May 04 '16 23:05 Herteby

This is my implementation of infinite scroll. It's very hacky hehe but it's good enough for me. Maybe it'll give you some inspiration.

Template.reactiveTable.onCreated(function(){
    var template = this,
            rows = new ReactiveVar(30);
    template.data.settings.rowsPerPage = rows;
    Meteor.setInterval(function(){
        //Constantly checking may look bad but it's more reliable than checking scroll events.
        var id = template && template.context && template.context.id;
        if(id){
            var table = $('#' + id);
            if($(window).height() + $(window).scrollTop() + 200 > table.offset().top + table.height()){
                rows.set(rows.get() + 10);
            }
        }
    },200);
});
Template.reactiveTable.events({
    'click th.sortable': function(){
        Template.instance().data.settings.rowsPerPage.set(30);
    }
});

Herteby avatar May 06 '16 11:05 Herteby

Cool, I like the idea of using rowsPerPage for this. I'm not sure about the best way to detect scrolling but your way looks fine. It might not work more generally if the table is in some scrollable div and not scrolling with the main page. Maybe I'll just put this in an example in the repo.

aslagle avatar May 06 '16 12:05 aslagle

Hey, cool that you like it! :smile:

Oops, I forgot to clear the interval on template destruction! I changed line 6 to this: template.infiniteScroll = Meteor.setInterval(function(){

And added this:

Template.reactiveTable.onDestroyed(function(){
    Meteor.clearInterval(this.infiniteScroll);
});

Hmm, I'd like to show the number of rows at the top of the table, since I'm not using the navigation bar. Do you know how I can get that number from reactive-table?

Herteby avatar May 06 '16 14:05 Herteby

There's not a good way to access it outside the table, but there's a template helper called 'getRowCount'. Since you're already using the template instance maybe it's possible for you to use it somehow.

aslagle avatar May 07 '16 04:05 aslagle