react-virtualized

Here are some things that are already built that do what you are building: https://github.com/bvaughn/react-virtualized https://github.com/bvaughn/react-window https://tanstack.com/virtual/latest

>But this does fall apart for very very large grids, as you get close to the height limit described in this article. This was solved by a now unmaintained virtualization library that predates both of these libraries: https://github.com/bvaughn/react-virtualized The react-virtualized library works around this issue by scaling the the scroll position it sets for a row based on the ratio of "max CSS height allowed by browser" to "computed height of all rows" if the latter is greater than the former: https://github.com/bvaughn/react-virtualized/blob/master/sou...

Make a demo with react-virtualized[0] and see if it crashes. Hint: It will not[1]. React can easily render 1 million rows with high performance without relying on WASM [2] Here is the demo of react-virtualized[3], in which I entered 10m as the row count and scrolled to the bottom without crashing. [0] https://github.com/bvaughn/react-virtualized [1] https://www.youtube.com/watch?v=1JoEuJQIJbs [2] https://medium.com/@priyankadaida/how-to-render-a-million-ro... [3] https://bvaughn.github.io/react-virtualized/#/components/Lis... *Update: Here I made a table with 1 million rows with search, filtering, and pagination. In plain Javascript: https://htmlpreview.github.io/?https://gist.githubuserconten...

Great! How does this compare to react-virtualized (https://github.com/bvaughn/react-virtualized)? Does it handle tables (rendered with table elements and not div)? Does it support column virtual scrolling?

I mostly agree, but every now and then there is actually a good reason to override/re-implement them. For example, let us say you are using virtualized components [0], so all available elements have not necessarily been rendered to the DOM (making Control-F useless). [0] - https://github.com/bvaughn/react-virtualized

I recently wrote a somewhat performant react-virtualized[0] list for a project at work, though it's definitely a bit trickier in plain HTML/JS. As far as the XUL virtualized tree goes, a couple of Mozilla engineers wrote some examples using plain html/javascript + DOM node manipulation[1]. While promising, I can't imagine that this implementation could ever be as fast as the compiled C++ one[2]. [0]: https://github.com/bvaughn/react-virtualized [1]: http://benbucksch.github.io/trex/fastlist-test.html [2]: https://searchfox.org/mozilla-central/source/layout/xul/tree... https://news.ycombinator.com/item?id=14158170

I have a few suggestions regarding search performance. As others have mentioned, there isn't one "right answer" but there are a few nifty tricks you can use to boost performance. You could try a trigram index[0] as the primary search index. You'd loose stemming, but gain language support and indexed regular expression search which is a nice power user feature. Looking at your where clause, did you index language and textsearchable_index_col together ? If not, you are giving the planner the opportunity to skip your full text index. if you order by ts_rank_cd then the query will sort all rows, including those that don't match. A better pattern is to take the ranking score as a column and then sort it in a subquery. [1] from stack overlfow has an example. (As an aside, from pg2, CTEs are no longer an optimization fence, so you can write the

Cool! Have you checked out https://github.com/bvaughn/react-virtualized too? Might be totally useless to you, but I think they've done a lot under the hood to optimise table loading. Congrats again on a beautiful product.

Seems that this is more trivially and optimally solved by using a virtualization library like https://github.com/bvaughn/react-virtualized or https://github.com/bvaughn/react-window

Yes, you should look for "virtualized" lists or scrolling. This is offered by many components in all frameworks. Here's a popular one: https://github.com/bvaughn/react-virtualized

It's the successor of react-virtualized (https://github.com/bvaughn/react-virtualized) by the same author Brian Vaughn (https://github.com/bvaughn). There is a section (https://github.com/bvaughn/react-window#how-is-react-window-...) in which he explains why he made a new library.

the state of art here is https://github.com/bvaughn/react-virtualized (https://bvaughn.github.io/react-virtualized/#/components/Lis...) and its successor, https://github.com/bvaughn/react-window (https://react-window.now.sh/#/examples/list/fixed-size)

All of your points are incorrect. - Web does have access to the camera. I regularly upload images to the Facebook mobile site. You can also do live previews of images and allow users to experiment with filters before uploading. - Live streaming on mobile web is also possible. If you support DASH and HLS you can reach the vast majority of mobile users [0] - It's possible to support offline apps with mobile web, but it's definitely tricky. The biggest issue for most people is that you can't perform work in the background. Service workers are an attempt at improving on that. But you can still save data in localStorage or IndexedDB and push it up when the user reconnects. There's an offline and online event you can hook into. - Native apps aren't magical. If you're dealing with large collections on the web you can also virtualize em, look at

There's also toolkits like React-Virtualized: https://github.com/bvaughn/react-virtualized .

Check out React Virtualized. I have used it with great success and large datasets. https://bvaughn.github.io/react-virtualized/#/components/Lis... https://github.com/bvaughn/react-virtualized