rocwang / vue-virtual-scroll-grid

A Vue 3 component that can render a list with 1000+ items as a grid in a performant way.
https://grid.kiwiberry.nz/
MIT License
300 stars 31 forks source link

[FEATURE REQUEST] Reactivity support? #282

Closed cwilvx closed 1 year ago

cwilvx commented 1 year ago

Is your feature request related to a problem? Please describe.

I'm building this search engine for a music player project I'm working on. When the search query is updated, I need to send a HTTP request to fetch new albums. I need a way to render the new data.

Is there any way to updated the rendered data reactively? I can't find a way in the docs.

Describe the solution you'd like

Instead of providing a pageProvider function to the Grid, allow us to provide a computed Ref<Any[]>. That way, I can update the view by updating the ref.

rocwang commented 1 year ago

Before considering adding the proposed computed Ref<Any[]>, would you mind trying the following solution:

The pageProvider prop is reactive and should trigger a rendering when changed. You may create a brand new pageProvider function whenever you receive a new list of items to render from your search query. i.e. creating a Computed<PageProvider> where PageProvider is defined as:

export type PageProvider = (
  pageNumber: number,
  pageSize: number
) => Promise<unknown[]>;

As seen on the demo site, when you switch the "Category", it effectively creates a new PageProvider under the hood, which refreshes the grid.