storbeck
commented
1 week ago In our tables, we display a lot of data. If we were to render it as a normal table, you would be able to (Ctrl +F) and find the data on screen. The problem with this approach is that we display so much information that your browser will crash by the number of DOM elements rendered on screen at one time.
To workaround that issue we use a library named react-virtualized which makes use of react-window.
React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:
It reduces the amount of work (and time) required to render the initial view and to process updates. It reduces the memory footprint by avoiding over-allocation of DOM nodes.
As it says, this will destroy DOM elements that are not within the current viewport, which your browser has no way of knowing ever existed, which is the reason (Ctrl +F) does not work. This issue has been brought up to the library maintainers and they are clear that this is not a search library. However, they do offer some (now outdated) libraries for searching which we could use in conjunction with react-virtualized.
This could be a little tricky to implement and you are most likely better off using the network / global search to filter through all the data, but I agree that (Ctrl +F) not working is both strange and annoying. I think we should find a fix for this but it may not be as urgent, more of a lingering ache in the UI.
It would be helpful if the UI supported the browser's search functionality (Ctrl + F) to find offscreen elements, especially since the search bar only supports prefix matching.