https://github.com/bsssshhhhhhh/vue-typed-virtual-list

Small, efficient, type-safe virtual list for Vue 3
https://github.com/bsssshhhhhhh/vue-typed-virtual-list

Last synced: about 2 months ago
JSON representation

Small, efficient, type-safe virtual list for Vue 3

• Host: GitHub
• URL: https://github.com/bsssshhhhhhh/vue-typed-virtual-list
• Owner: bsssshhhhhhh
• License: other
• Created: 2022-12-31T02:51:21.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-18T15:37:18.000Z (8 months ago)
• Last Synced: 2024-01-24T22:37:52.846Z (4 months ago)
• Language: TypeScript
• Size: 1.69 MB
• Stars: 30
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-typed-virtual-list - [Vue 3.x] small, efficient, TypeScript-friendly virtual scroller for rendering massive data (Components & Libraries / UI Layout)

README

        
# vue-typed-virtual-list

[![npm](https://img.shields.io/npm/v/vue-typed-virtual-list.svg)](https://npmjs.com/package/vue-typed-virtual-list) [![size](https://img.shields.io/bundlephobia/minzip/vue-typed-virtual-list?label=size)](https://bundlephobia.com/package/vue-typed-virtual-list) [![vue3](https://img.shields.io/badge/vue-3.x-blue.svg)](https://vuejs.org/) [![Typescript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

A fast, type-safe virtual list component for rendering massive data. Works with Vue 3

[Live Demo](https://bsssshhhhhhh.github.io/vue-typed-virtual-list/) **·** [Try it on CodeSandbox](https://codesandbox.io/s/vue-typed-virtual-list-w26j1l?file=/src/App.vue)

Features:

- Extremely efficient calculations

- Provides generic type safety inside the `#item` slot

- Automatically and transparently deals with variable element heights

- Small footprint. <10KB gzipped, including dependencies

## Usage

Example:

```vue

  


    

      

        


        {{ ref.name }}

      

    

  


import { defineComponent } from 'vue';

import { createVirtualScroller } from 'vue-typed-virtual-list';

type User = {

  id: number;

  name: string;

  phone: string;

};

export default defineComponent({

  components: {

    // pass the item type as a type parameter to enable type safety in the item slot

    VirtualScroller: createVirtualScroller<User>()

  },

  data: () => ({

    someArrayOfUsers: Array

      .from(Array(100))

      .map((_, i) => ({

        id: i + 1,

        name: 'Name',

        phone: 'Phone'

      }))

  })

})

```

or, with ``:

```vue

<script setup lang="ts">

import { createVirtualScroller } from 'vue-typed-virtual-list';

const VirtualScroller = createVirtualScroller<User>();

type User = {

  id: number;

  name: string;

  phone: string;

};

const someArrayOfUsers: User[] = Array

  .from(Array(100))

  .map((_, i) => ({

    id: i + 1,

    name: 'Name',

    phone: 'Phone'

  }));

```

#### JavaScript Usage

If you're not using TypeScript in your project:

```diff

-const VirtualScroller = createVirtualScroller();

+const VirtualScroller = createVirtualScroller();

```

### Props

- `defaultSize` - Placeholder size to use in calculations before an item's actual height has been measured

- `items` - Array of items to render

- `padding` - Number of items beyond what is visible in the overflow viewport to render. *(Default: 10)*

### Emits

- `visibleItemsChanged` - Fired when the start/end indices have changed

  - argument type: `{ start: number; end: number }`

### Exposed Instance Methods

-  `scrollTo(index: number): void` - scrolls an index into view ([Example](https://github.com/bsssshhhhhhh/vue-typed-virtual-list/blob/gh-pages-src/src/App.vue#L71-L78))

### Development

```

yarn

yarn dev

```

### Contributing

PRs welcome