Is there a strategy to search (ctrl + F) through a virtualised list?
I understand that the content doesn't actually exist in the DOM, and therefore it can't be searchable. However, I'm sure I'm not the first person to need to address this.
My use-case is that I'm rendering out a heap of paragraphs, as a result of a podcast transcript, and there are event handlers peppered throughout the words. My performance for the page is pretty 💩 when there are a lot of paragraphs (for long podcasts, it could be over 100 paragraphs). If there are only a few paragraphs though, performance is great. The reason I'm reaching for this library is that only a few paragraphs are displayed on screen at a time, so virtualising the list seems like an easy win. But it seems necessary to allow users to search through a transcript for certain words. All the paragraphs have id's and ref's, so I was thinking i could write my own search box etc. and create some kind of word map...
A different solution I was thinking of, instead of using this library, was checking if a paragraph was currently in view, and only then apply the event handlers etc.
Hopefully this provides enough context and someone else has come across this as well!
1 Reply
dependent-tan•3y ago
Hi, I am using useInfiniteQuery to fetch paginated data (groups/pages of data) from the backEnd.
Than I am passing the data into tanstack/react-table with fuzzysort/filter meta functions.
With those functions you can sort all data in your table.
And I created a Search input that triggers them.
I dont understand, what do you mean by "content doesn't actually exist in the DOM", because virtualization allows you to render only specific amount of data in the dom. And on scrolling example in my case, it rerenders other new data.
I also thought about filtering on the all data that related to this table. And think of this approach: whenever user cant find row with the data by fuzzySort/FilterMeta I will call BackEnd API with search input parameters, and then show those rows on the UI