feat: implement new `Tasks BigData` example for useVirtualList usage

[hrynevychroman]

This PR try to fix #296

So I add a new example where implemented virtualList based on vueuse core function.

I tried to use seperate package but it don't fit for table HTML at all because creating 2 div wrappers.

Please watch this video 👇 , or try by yourself, you will feel performance improvements at all

https://github.com/radix-vue/shadcn-vue/assets/82209198/50fa452d-a92a-4c6f-a950-963b27d77e38

@sadeghbarati need help with this, what will be the best Doc for this, because if we are porting only original package, there is no BigData example at all 🙂

[sadeghbarati]

Thanks, Man! @romanhrynevych

Will try to checkout to your branch to fully test it ❤️

Also, I think the issue you linked is related to DropdownMenu itself and its DropdownMenuItems It might be related to this discussion is Discord Help and Question (Combobox or Dropdown Virtual List) but thanks anyway 😁

---

need help with this, what will be the best Doc for this, because if we are porting only original package, there is no BigData example at all

Can you explain more please 🙏

[hrynevychroman]

need help with this, what will be the best Doc for this, because if we are porting only original package, there is no BigData example at all

Can you explain more please 🙏

Don't think that this place on main page is great position for example, maybe you will move it to another place 😁❤️

[sadeghbarati]

Don't think that this place on main page is great position for example, maybe you will move it to another place 😁❤️

~~I think it's better to replace it with the Original Task page~~ let see what is Zernonia's opinion is

I think in data-table.md after column pinning example is good place

[hrynevychroman]

@zernonia can you take a look on this PR? What you think is the best place to show Tasks Example?

[zernonia]

Thanks for the PR @romanhrynevych . I don't think we need to duplicate a whole other component just to showcase large dataset. Most of the component/utilities are the same and can be reuse from examples/tasks.

And let's create another path (https://www.shadcn-vue.com/docs/guide/rendering-large-data.html), and write some guide/steps to help other dev to use the virtualisation package instead of another demo.

I believe this way it will be more clear, and more helpful.

[hrynevychroman]

Ok, I will update this PR to your advice soon ❤️

[hrynevychroman]

@sadeghbarati hi 👋

I added new guide section, but don't know where to move examples/big-data folder, because it has custom logic for this type of tables only, maybe you will provide nice place for it ❤️

If it will be some more fixes feel free to provide them, i will fix all of them 😁

[sadeghbarati]

Thanks Roman will check

[hrynevychroman]

@sadeghbarati just noticed that tanstack has his own virtualizer (noticed in this Radix-vue Issue your comment 😁 ) https://github.com/radix-vue/radix-vue/issues/696#issuecomment-1953807473, maybe here I will replace vueuse integration with tanstack table example?

Link: https://tanstack.com/virtual/latest/docs/framework/vue/examples/table

[sadeghbarati]

Feel free to switch to TanStack Virtual or add both?

[hrynevychroman]

thinking about switching to TanStack for more extended features in future 🤔

[sadeghbarati]

Yes TanStack for the Win

[maelp]

I've found tanstack virtualized more difficult to use (and finnicky) than vue-use, but vue-use has less features

Coudln't really manage to make this work with a table without hitting display issues, so I ended up adding fixed-width to all cells and using a "list" with each row made of cells