I have an app that is essentially a table view with many rows and columns of select inputs and each select input can have 1000s of options. Each column in the table view is the same set of data per select input and each row is a different document in the database. When using regular selects with this many options inside, we get crazy lag. So I looked around and decided to use a combo of two packages.
Demo example: https://codesandbox.io/s/react-windowed-select-inside-react-window-dh24r?file=/index.js
My plan was to combine react-window with react-windowed-select, but this too has pretty bad performance issues. The lag is especially noticeable on initial render. (notice the load time when clicking on the React Select Rows button).
What is the best way to handle this sort of application in React? I'm currently thinking there may be 2 options though I'm sure there are many others.
- Find a way to improve performance using the existing two packages.
- Write something far more custom that loads all of the
rows with plain text and a single
react-windowed-selectcomponent per column that is hidden. When the user clicks on what would be a select input, we position that columns select input as if it was in the clicked location and open it.
Any help or advice is appreciated.