https://github.com/yaxian/vue3-virtualized
Vue3 components for efficiently rendering large, scrollable lists and tabular data
https://github.com/yaxian/vue3-virtualized
virtual-list vue vue3
Last synced: about 2 months ago
JSON representation
Vue3 components for efficiently rendering large, scrollable lists and tabular data
- Host: GitHub
- URL: https://github.com/yaxian/vue3-virtualized
- Owner: Yaxian
- License: mit
- Created: 2021-02-27T03:49:57.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-03-03T14:51:53.000Z (over 5 years ago)
- Last Synced: 2025-12-27T12:11:37.601Z (6 months ago)
- Topics: virtual-list, vue, vue3
- Language: JavaScript
- Homepage:
- Size: 764 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue3-virtualized
It was inspired by [react-window](https://github.com/bvaughn/react-window).
### Run example
```
cd examples
yarn install
yarn dev
```
### VariableSizeList
```vue
import { VariableSizeList } from 'vue3-virtualized'
const Row = {
name: 'Row',
props: {
index: {
type: Number
},
rows: {
type: Array,
default: () => ([])
},
},
setup(props) {
return () => {
return (
<div style="border: 1px solid">Row {props.index}</div>
)
}
}
};
const rowHeights = new Array(1000).fill(true).map(() => 25 + Math.round(Math.random() * 50));
const getItemSize = index => rowHeights[index];
export default {
name: 'VariableSizeListDemo',
components: {
VariableSizeList,
Row,
},
data() {
return {
rowHeights,
getItemSize,
}
},
methods: {
handleClickRow(rowData, index) {
console.log(`click row ${index}`)
}
}
}
```