aslagle / reactive-table

A reactive table designed for Meteor
https://atmospherejs.com/aslagle/reactive-table
Other
328 stars 138 forks source link

Infinite Scroll #383

Open Herteby opened 8 years ago

Herteby commented 8 years ago

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 commented 8 years ago

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);
    }
});
aslagle commented 8 years ago

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.

Herteby commented 8 years ago

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?

aslagle commented 8 years ago

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.