For a project at work, we need to be able to implement virtual scrolling for over 50,000 dynamic events (realtime data updates). As you would expect, sticking all 50,000 events into the angular scope (but only displaying 100 a time) kills the browser...well it makes it unusable for a while. We need to implement the following features:
- The data must have two way binding. If I update my model I would like to see the changes in the grid. For example:
- When a socket server pushes a new event to the client, we would like to add it to the grid (if the scroller is at the bottom of the grid, otherwise we'll fetch the new events when the user scrolls to the bottom).
- If an event is in the view port and the model changes, then update the event data accordingly
- To be able to annotate entries in the grid and push an annotation below the associated event
- Delete entries and remove the entry from the model and the viewport
- The rows can vary in height (not a must, but would be nice)
- If I resize my window, try to responsively fit as many events as possible into the screen view port and update the model for items per page. Granted if I don't have fixed height for the rows, then this is virtually impossible.
We've looked at many libraries that implement virtual scrolling, for example jqxGrid, SlickGrid to name a couple
The ones we have looked at all work on the same premise which is:
- For a given row X, what is the top offset for that row?
- For a given offset Y, what row is at that offset?
When you use a static row height, answering these questions is trivial; however, with dynamic row height, the implementation starts becoming very difficult.
Furthermore, none support dynamic updates. If dynamic updates were to happen then the row offsets would all have to be recalculated.
It would be nice to hear your ideas to see how you would go about trying to implement it - at least for me this is not trivial at all.
