Performance optimization for a large HTML table in clojurescript

I have a large HTML table rendered with Reagent, with like 2000 rows.
Only a part of it is visible due to a scroll bar in the wrapping div.

What would be a good approach to optimizing this, in order to avoid ‘your page is slow’ warnings from eg. firefox?

I was thinking about dynamically rendering only a sliding ‘window’ using a re-frame subscription, but not sure if that’s going to solve anything.

Any tips?

Edit: I figured out using a few tests that it’s the rendering part that is problematic. It’s not a problem to store eg. 5000 rows of data in a local atom, and then only render 100 via (take 100 my-data) for example. So for now I will explore partial rendering to see if that’s doable.

Any experiences with this type of problems still very much welcome :slight_smile:

I usually avoid this problem bij pagination etc. but I now have a use case where it would be nice if actually all data is in the table, or at the very least locally available in memory.

This problem is solved by Here is some example code for using it from Reagent:


Thanks that looks great. Since 2016 i’m using my own re-frame datagrid lib, so I missed this one. This is a way better fit.

The example code may be behind, since React Virtualized (being a JS lib) has undergone some API changes.

1 Like

There is also .

1 Like