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 https://github.com/bvaughn/react-virtualized. Here is some example code for using it from Reagent: https://gist.github.com/pesterhazy/10b4a01908e7632825a2321c06130989.

2 Likes

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 https://github.com/adazzle/react-data-grid .

1 Like