VirtualScroll Feature #123
Conversation
|
Although I announced that I want to retreat from this project in #116 I am quite amazed by this feature. I will have a look. And when I am already "in" again, I will also properly define a version 2.9.0 milestone and include some of the open bugs. Give me some days, though, I have quite a busy schedule. Just one short question, before I start looking at the details: have you tested this with both the local and the server data source? What is the technique for fetching remote data in the presence of virtual scrolling? |
|
Sure man, take your time! To answer your question: No I haven't checked this with the |
chore: update demo pages + add documentation to VirtualScroll & InfiniteScroll settings
|
Hi again, I updated the demo pages and added a I also added a new feature "InfiniteScroll" which is an additional sub-setting you can give to the "VirtualScroll" setting. I added some explanation to the setting parameters so you (or anyone for that matter) can better understand what the implications are of each setting. The Let me know if you ran into this issue before, if not I wil continue to try and debug it. Best Regards |
chore: cleanup logging + make getNextFunction required
|
Ok so this is the final addition (I think) 😁 I added some loading placeholders when the next batch of data is being fetched. To enable this behaviour you need to set the Finally I did some cleanup and made the Let me know what you think! |
| export class NumberToArrayPipe implements PipeTransform { | ||
|
|
||
| public transform(value: number | undefined):any[] { | ||
| return new Array(value || 0); |
There was a problem hiding this comment.
Better use ?? operator.
| ); | ||
| } | ||
|
|
||
| private getNextBatchServer(offset: number): Observable<any[]> { |
There was a problem hiding this comment.
I do not understand this function. What is it supposed to do? It is never called, until you reach the end of the table. Also, the "fake data" is not coming from the server, which looks like quite disconnected from what a user would actually need to do. So I don't think this serves well as an example.
The second observation is: when the end of the table (i.e. after 5000 entries) is reached, 20 identical HTTP requests are sent out (https://jsonplaceholder.typicode.com/photos?_sort=&_order=&_page=1&_limit=9007199254740991).
Maybe the infinite scroll is not working as inteded. Please check.
Update: the limit of 9007199254740991 looks like the perPage setting you have specified. Just as a side note: this might break server implementations that only support 32 bit integers.
There was a problem hiding this comment.
@gem85247 Please consider the comments in the respective files and also please add all new settings to the documentation.component.html file. Beyond that, I think this can be merged soon.
|
@gem85247 Another thing I have noticed is that expanded rows or rows that are currently edited inline are reset when the next batch is fetched in the infinite scroll example with local data source. Also, the feature does not play well with multi selection. When you check the "select all" checkbox, only the rows that are currently loaded are selected. When you scroll down and fetch the next batches, the items are not selected. |
|
Closed due to inactivity. |
Hi,
First of all, a big thanks for creating and maintaining this package, I really love how you improved the original ng2-smart-table package!
I'm submitting a pr because I managed to implement a working virtual scroll using the official @angular/cdk (https://v13.material.angular.io/cdk/scrolling/overview). I tested the "angular cdk" library from version 13.x till 15.x against this library.
I also added a demonstration to the demo page (Examples => Various => Virtual Scroll). There you will see the virtual scroll in action. In a nutshell, no matter how many data entries you have, the DOM will only create a fixed amount of HTML table rows (
<tr>) depending on how big your viewport is (you can view this in any browser DOM inspector).This ensures that the browser DOM doesn't get overloaded with html elements that aren't even visible to the user. This feature will especially be helpful for people who are feeding big datasets to their users. I personally use this in a combination with an infinite scrolling list that loads more data as the user scrolls down and it seems to be working fine.
Let me know what you guys think of this feature and I'm happy to answer any questions or provide more information as needed.
Thank you for your time & consideration!