angular2-smart-table
angular2-smart-table copied to clipboard
dj-fiorex
VirtualScroll Feature
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!
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 ServerDataSource variant, let me check this first so we don't waste each others time ;)
Hi again,
I updated the demo pages and added a ServerDataSource implementation.
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 ServerDataSource works fine for "VirtualScroll" without "InfiniteScroll". But when we are adding data to the ServerDataSource with the "InfiniteScroll" set-up, it seems to not visually show the (lazy) appended data. When I look inside the internal data array, the added data is present, but as I stated it is not visually shown. Might be a ChangeDetection problem I think?
Let me know if you ran into this issue before, if not I wil continue to try and debug it. Everything else is working fine though!
Best Regards
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 loadingPlaceholder field to a number higher than 0.
Finally I did some cleanup and made the getNextFunction required in the "InfiniteScroll" settings interface.
Let me know what you think!
@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.