This data grid (a simple HTML table) is an example of using RxJS to push data incrementally as we scroll.
In this example the data set is generated on the fly for a maximum of N records.
While scrolling the table (grid) downward additional data are loaded in equal chunks each time we approach the bottom of the grid. With this approach we can consume large amounts of data as needed, loading them in chunks only if required while the user scrolls the grid.
This was a nice exercise to learn the mechanism of pushing data to the DOM using RxJS versus pulling as we are normally used to do. I also needed this component for an other application in a different project, so I decided to develop something in isolation resulting in this little project.
The data set can be configured to produce any number of rows, and for each row a set of cells with random data can be generated.
The objective of this project was to understand the mechanism that can be used, and to provide an initial solution that can be built upon.
In a more realistic scenario we would have such data coming from Ajax requests, or a different source. For an example of that kind of application you can look at QuakeMap, a real-time earthquake visualizer using RxJS and async data loading from a real API.