\r\n \u003C/tr>\r\n \u003C/thead>\r\n \u003Ctbody>\r\n \u003CUseVirtualList>\r\n \u003CTableRows />\r\n \u003C/UseVirtualList>\r\n \u003C/tbody>\r\n\u003C/table>\r\n```\r\nAny tips or ideas on how to approach this will be great.\r\n",[],1209,"closed","UseVirualList in Tables","2022-11-11T20:25:55Z","https://github.com/vueuse/vueuse/issues/1209",0.62634,{"description":2876,"labels":2877,"number":2879,"owner":2860,"repository":2860,"state":2870,"title":2880,"updated_at":2881,"url":2882,"score":2883},"### Clear and concise description of the problem\n\n`useVirtualList` is great! It would be great if we could use this for horizontal scroll as well.\n\n### Suggested solution\n\nAdd `horizontal` support\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[2878],{"name":2857,"color":2858},2285,"horizontal `useVirtualList`","2022-10-25T09:18:31Z","https://github.com/vueuse/vueuse/issues/2285",0.6930885,{"description":2885,"labels":2886,"number":2887,"owner":2860,"repository":2860,"state":2870,"title":2888,"updated_at":2889,"url":2890,"score":2891},"### Describe the bug\n\nWhen there is too much content on the page, the scrolling plug-in will cause a stuck delay and a poor user experience\n\n### Reproduction\n\nNo link\n\n### System Info\n\n```Shell\nWhen moving elements, avoid modifying the top, right, bottom and left attributes. Instead, use transform: translate()\n```\n\n\n### Used Package Manager\n\nnpm\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],2481,"The layout switch of the usevirtuallist component causes the page to get stuck","2023-01-17T07:20:10Z","https://github.com/vueuse/vueuse/issues/2481",0.7204293,{"description":2893,"labels":2894,"number":2896,"owner":2860,"repository":2860,"state":2870,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### Clear and concise description of the problem\n\nUseVirtualList needs to set the `height` attribute, but I only want to set a `max-height`, In the hook of useVirtualList, it is possible, but the speed of useVirtualList is much slower than that of the component, Is there any solution?\n\n### Suggested solution\n\nThe `height` attribute can be replaced with the `max-height`\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[2895],{"name":2857,"color":2858},3538,"The component's useVirtualList is faster than the hook's","2024-01-18T01:38:41Z","https://github.com/vueuse/vueuse/issues/3538",0.723236,{"description":2902,"labels":2903,"number":2904,"owner":2860,"repository":2860,"state":2870,"title":2905,"updated_at":2906,"url":2907,"score":2908},"### Describe the bug\r\n\r\n`useVirtualList` cannot be used with Vue's [template refs](https://vuejs.org/guide/essentials/template-refs.html). If the HTML element that binds to the `containerProps` also has a\r\ntemplate ref, then the `list` returned by `useVirtualList` remains empty:\r\n\r\n```html\r\n\u003Cscript setup>\r\n//...\r\nconst scroller = ref(null)\r\nconst { list, containerProps, wrapperProps, scrollTo } = useVirtualList(allItems, {\r\n itemHeight: 24,\r\n})\r\n\u003C/script>\r\n\r\n\u003Cdiv v-bind=\"containerProps\" ref=\"scroller\">\r\n \u003Cdiv v-bind=\"wrapperProps\">\r\n \u003Cdiv v-for=\"item in list\" class=\"item\" :key=\"item\">{{ item }}\u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n```\r\n\r\nRemoving `ref=\"scroller\"` from the code above will fix the virtual list.\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vitejs-vite-5x9fwn?file=src/components/VirtualList.vue\r\n\r\n### System Info\r\n\r\n```Shell\r\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 16.14.2 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 7.17.0 - /usr/local/bin/npm\r\n npmPackages:\r\n @vueuse/core: 10.1.0 => 10.1.0 \r\n vue: 3.2.47 => 3.2.47\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nnpm\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://vueuse.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\r\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\r\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],3048,"useVirtualList - list is empty if container is bound to template ref","2023-05-03T08:47:57Z","https://github.com/vueuse/vueuse/issues/3048",0.72666514,{"description":2910,"labels":2911,"number":2913,"owner":2860,"repository":2860,"state":2870,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Clear and concise description of the problem\n\nWe need a virtual list combined with\r\n1. an api call to fetch extra rows when we get close to reaching the bottom\r\n2. an api call to fetch extra data on shown rows\r\n\n\n### Suggested solution\n\nI imagine the API could look something like this\r\n\r\n```ts\r\nconst rows = ref\u003C{ id: string }[]>([])\r\n\r\nconst extraData = ref\u003C{ [id in string]: unknown }>({ })\r\n\r\nconst filteredItems = computed(() => rows.value.map(r => ({ ...r, extraData: extraData[r.id] })))\r\n\r\nasync function fetchRowData (id: string) {\r\n const data = await api.fetchExtraData(id)\r\n extraData[id] = data\r\n}\r\n\r\nasync function fetchExtraRows (index: number) {\r\n if (index + 20 > rows.value.length) {\r\n const rows = await api.fetchRows({ after: rows.value.length, limit: 20 })\r\n rows.value.push(...rows)\r\n }\r\n}\r\n\r\nasync function onRowBecameVisible (index: number) {\r\n const rowId = filteredItems.value[index].id\r\n fetchRowData(rowId)\r\n fetchExtraRows(index)\r\n}\r\n\r\nconst { ... } = useVirtualList(\r\n filteredItems,\r\n {\r\n visible: i => onRowBecameVisible(i),\r\n itemHeight: i => (filteredItems.value[i].height + 8),\r\n overscan: 10,\r\n },\r\n)\r\n```\n\n### Alternative\n\n\r\n```ts\r\nconst { list, containerProps, wrapperProps, scrollTo } = useVirtualList(\r\n filteredItems,\r\n {\r\n itemHeight: i => {\r\n // async side effect in here seems... wrong\r\n onRowBecameVisible(i)\r\n return filteredItems.value[i].height + 8\r\n },\r\n overscan: 10,\r\n },\r\n)\r\n```\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[2912],{"name":2857,"color":2858},2286,"`useVirtualList` receive events from mounting shown indexes","2023-01-17T07:20:19Z","https://github.com/vueuse/vueuse/issues/2286",0.72743875,{"description":2919,"labels":2920,"number":2922,"owner":2860,"repository":2860,"state":2870,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### Clear and concise description of the problem\n\nThe [current `useVirtualList`](https://github.com/vueuse/vueuse/blob/main/packages/core/useVirtualList/index.ts) requires `itemHeight` to be provided as a constant, or as a function accepting an index. This proposal suggests extending the function to allow the `itemHeight` to be calculated according to the item itself, not only the index, making the `itemHeight` more usable & reasonable. I'll later try to submit a PR.\n\n### Suggested solution\n\nIn the current `useVirtualList` function, instead of having the the `itemHeight` like\r\n\r\n```ts\r\n{\r\n itemHeight: number | ((index: number) => number),\r\n\r\n // ...\r\n}\r\n```\r\n\r\nwe could have something like\r\n\r\n```ts\r\n{\r\n itemHeight: number | ((item: T, index: number) => number),\r\n\r\n // ...\r\n}\r\n```\r\n\r\nor if we might worry about the breaking change\r\n\r\n```ts\r\n{\r\n itemHeight: number | ((index: number, item: T) => number),\r\n\r\n // ...\r\n}\r\n```\r\n\r\nwhich is slightly unintuitive in the JS world.\n\n### Alternative\n\nEven if the item height could be calculated against itself, this should still be considered static, i.e., the function has to be idempotent. Another solution is to wrap around items to allow dynamic content, which is more general but complicated.\n\n### Additional context\n\nMight be related issues / PRs\r\n\r\n- https://github.com/vueuse/vueuse/issues/1017\r\n- https://github.com/vueuse/vueuse/issues/954\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[2921],{"name":2857,"color":2858},1521,"Calculate `itemHeight` for `useVirtualList` from item properties","2022-04-23T01:54:19Z","https://github.com/vueuse/vueuse/issues/1521",0.7275978,{"description":2928,"labels":2929,"number":2930,"owner":2860,"repository":2860,"state":2870,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Describe the bug\n\nI tried to use `useVirtualList` in a Vue 2 based project, but I couldn't get it working. I copy and pasted the demo into the code but it wasn't working. However, when creating a Vue 3 project, it immediately worked. \r\n\r\nTo be more precise, we can see that in the Vue 2 demo that the `margin-top` and `height` of the wrapper div is never updated, and in the DOM inspector the following attribute is visible on the container div : `onscroll=\"() => { calculateRange(); }\"` which probably means that `calculateRange()` is simply never called when using vue 2.\n\n### Reproduction\n\nVue 2: https://codesandbox.io/s/boring-cache-p9h5li - Vue 3: https://codesandbox.io/s/sleepy-tess-fwu947\n\n### System Info\n\n```Shell\nSystem:\r\n OS: macOS 13.0.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 2.61 GB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node\r\n Yarn: 1.22.19 - ~/.yarn/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm\r\n Browsers:\r\n Chrome: 107.0.5304.121\r\n Firefox: 107.0.1\r\n Safari: 16.1\r\n Safari Technology Preview: 16.4\n```\n\n\n### Used Package Manager\n\nyarn\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],2510,"`useVirtualList` not working in Vue 2","2023-01-09T18:41:30Z","https://github.com/vueuse/vueuse/issues/2510",0.73183393,{"description":2936,"labels":2937,"number":2938,"owner":2860,"repository":2860,"state":2870,"title":2939,"updated_at":2940,"url":2941,"score":2942},"## Feature Request\r\n\r\nI want to be able to have searchable virtual lists. The discussion below has a reproduction and desired API.\r\n\r\n### Discussed in https://github.com/vueuse/vueuse/discussions/824\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **JessicaSachs** October 6, 2021\u003C/sup>\r\nHello! The current implementation of `useVirtualList` works great for a static list, but I'm struggling with how to make it reactive. The current signature specifies an array instead of a reactive ref. Can I get an example of `useVirtualList` with a simple textfield filter?\r\n\r\nHere's a reproduction of what I'd like to be able to do...\r\n\r\nhttps://github.com/JessicaSachs/useVirtualList/blob/main/src/App.vue#L26-L44\r\n\r\n```js\r\nimport { ref, computed } from 'vue'\r\nimport faker from 'faker'\r\nimport { useVirtualList } from '@vueuse/core'\r\n\r\nconst search = ref('')\r\n\r\nconst bigList = Array.from(Array(100).keys()).map(a => ({\r\n // name, avatar, etc\r\n ...faker.helpers.createCard(),\r\n id: faker.datatype.uuid()\r\n}))\r\n\r\nconst filteredList = computed(() => {\r\n return bigList.filter(i => {\r\n return i.name.toLocaleLowerCase().indexOf(search.value.toLocaleLowerCase()) > -1\r\n })\r\n})\r\n\r\n// Ideally, I could pass something reactive into `useVirtualList`\r\nconst { list, wrapperProps, containerProps } = useVirtualList(filteredList.value, { itemHeight: 80 })\r\n```\r\n\r\n\r\n\u003C/div>",[],903,"useVirtualList should support reactive refs","2021-11-14T15:50:03Z","https://github.com/vueuse/vueuse/issues/903",0.7357039,["Reactive",2944],{},["Set"],["ShallowReactive",2947],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frEfpbXGklvZYmcj_Zh2cRko91zVnGlBm7Ju9hS60kCw":-1},"/vueuse/vueuse/2437"]