md-data-table Infinite Scroll feature

Infinite Scroll feature

Open kevindstanley1988 opened this issue 8 years ago • 23 comments

Hi, it would be a great feature for mobile to allow for infinite scroll. This table works great for mobile already except for the user ease of use in pagination, this is more irritating on mobile than it is on desktop and infinite scroll + this perfect material look would be a killer combo.

Aug 25 '15 18:08 kevindstanley1988

You are not forced to use pagination if you do not want to. I'm not completely sure what you are requesting. Are you suggesting a lazy load type feature? Where more content is fetched from the server as the user scrolls down?

Aug 25 '15 18:08 daniel-nagy

Yes that is exactly what I am requesting! For example, initially load 10 items, when the user scrolls and gets near the bottom of the list, start loading 10 more items and append to the list, then continue to do so until all items have been scrolled through. I haven't thought much into it, but I guess really this could be done by adding a function trigger for "ScrolledNearBottom" like the other triggers and then in the controller function just append the next set of results.

Aug 25 '15 20:08 kevindstanley1988

This is a pretty good idea, I think I could probably check if the bottom of the table is visible in the viewport and fire off some sort of event.

Aug 25 '15 20:08 daniel-nagy

The table already works pretty well using md-virtual-repeat-container, there are just some issues because it expects ng-repeat instead of md-virtual-repeat. I'm gonna try to make it work and send a PR. BTW great work!

<md-data-table-container flex layout="column">
  <md-virtual-repeat-container flex>
    <table md-data-table md-row-select="vm.selected" md-progress="vm.deferred" class="md-primary">
      <thead md-order="vm.query.order" md-trigger="vm.getItems">
      <tr>
        <th name="Name" order-by="name"></th>
      </tr>
      </thead>
      <tbody>
      <tr md-auto-select md-virtual-repeat="item in vm.infiniteItems" md-on-demand>
        <td>{{item.name}}</td>
      </tr>
      </tbody>
    </table>
  </md-virtual-repeat-container>
</md-data-table-container>

Sep 20 '15 19:09 danielmana

@daniel81bcn, that would be a great PR! Virtual repeat is ideal for my use case.

Sep 27 '15 19:09 andrea-vega

I did the integration but I should do some cleanup and make disabled rows work again before sending the PR. For a demo: http://daniel81bcn.github.io/md-data-table/ The changes: https://github.com/daniel81bcn/md-data-table/commit/7a04df866b99057f1a22ef333751b70ff6e94949

Sep 28 '15 08:09 danielmana

@daniel81bcn I'm using your branch right now and it's working fine. The scrollbar behaves strangely once you reach the end of the rows, but that might be a quirk of the md-virtual-repeat feature in general.

Oct 05 '15 14:10 andrea-vega

@andrea-vega on the demo you can see that I used 2 different tables, one with just the head and the other one with the actual body and infinite scroll, because otherwise the md-virtual-repeat-container doesn't calculate well the height and it does that weird behave reaching the end. That hack is ugly and has some side effects, like the need of setting manually the width of columns to mach body and header. As the md-virtual-repeat needs to add a wrapper and the table doesn't let us add tags in the middle of thead, tbody I think we have to look for some other solution -_-

Oct 05 '15 20:10 danielmana

@daniel81bcn your solution gets most of the way there. I know it's not an easy feat. @daniel-nagy, have you looked into this at all? :)

Oct 27 '15 15:10 andrea-vega

Definitely would like to use the infinite scroll feature if @daniel-nagy gets around to looking at this.

Dec 30 '15 16:12 mlenser

There is nothing stoping you from using md-virtual-repeat in version 0.9.x.

<tbody md-body md-virtual-repeat-container>
  <tr md-row md-select="item" md-virtual-repeat="item in items">
    <td md-cell>{{item.id}}</td>
    <td md-cell>{{item.name}}</td>
    <td md-cell>{{item.date}}</td>
  </tr>
</tbody>

and if you add the following to your style sheet

table.md-table {
  position: relative;
}

tbody.md-body.md-virtual-repeat-container {
  display: table-row-group;

  .md-virtual-repeat-scroller {
    top: initial;
    bottom: initial;
  }
}

It will look okay but I'm not sure if the md-virtual-repeat directive is actually working correctly or not. I've never used before.

Dec 30 '15 17:12 daniel-nagy

I don't think Virtual repeat can cover http calls. That's really what I'm after. :S

Dec 30 '15 17:12 mlenser

@mlenser you can use async calls with mdVirtualRepeat, look at the controller for the Infinite Scroll example on https://material.angularjs.org/latest/demo/virtualRepeat

// For demo purposes, we simulate loading more items with a timed
// promise. In real code, this function would likely contain an
// $http request.
if (this.toLoad_ < index) {
  this.toLoad_ += 20;
  $timeout(angular.noop, 300).then(angular.bind(this, function() {
    this.numLoaded_ = this.toLoad_;
  }));
}

@daniel-nagy the problem is that the md-virtual-repeat-container directive adds a couple of div's after tbody which creates a non-valid HTML

Dec 30 '15 18:12 danielmana

I have an algorithm for a fixed table header. I know the people over at #184 want it. I don't want to make it a part of this module but I might offer it as a separate directive and then build off it to implement an infinite scroll feature.

Dec 30 '15 19:12 daniel-nagy

Using the infinite scroll virtual repeat would prevent any kind of sorting via orderBy as that expects an array.

Dec 31 '15 10:12 mlenser

@mlenser the infinite scroll works with arrays as well, just change the getItemAtIndex to return what you desire, for example

getItemAtIndex: function(index) {
  if (index >= this.array.length) {
    this.fetchMoreItems_(index);
    return null;
  }
  return this.array[index];
}

where this.array is populated by concatenating items on fetchMoreItems_

Dec 31 '15 11:12 danielmana

The key component that prevented anything from working before was I was missing "md-on-demand" on the repeating tr (see in the comments above and on angular material's demo, but not in daniel's example above).

Working through all the weirdness with ES6 and http. Will post back w/ some examples for others if I'm successful.

Though it does look like orderBy doesn't work. We'll see.

Dec 31 '15 11:12 mlenser

Has anyone gotten md-virtual-repeat to work with an md-data-table in a md-dialog?

Jun 21 '16 13:06 epelc

Has anyone gotten md-virtual-repeat to work with an md-data-table, period?

Aug 09 '16 23:08 stephengardner

@stephengardner I did, using md-on-demand and fixe-head. Take a look:

Html:

<md-virtual-repeat-container class="virtual-repeater-container" 
                             md-top-index="topIndex" fix-head>
  <md-table-container>
     <table md-table md-row-select multiple="true" ng-model="selected">

       <thead md-head>
             <tr md-row>
                      // headers 
              </tr>
       </thead>

        <tbody md-body>
             <tr md-row md-auto-select md-select="model"
                   md-virtual-repeat="model in grid" md-on-demand>
                       // cells
              </tr>
          </tbody>

      </table>
  </md-table-container
</md-virtual-repeat-container>