npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-virtualized-list

v1.1.0

Published

A virtual list. Useful when you need to show large amount of data. It only render the DOM elements it needs. It has less functionality compared to other virtual list libraries but it's **under 5kb** before gzip

Downloads

192

Readme

vue-virtualized-list

A virtual list. Useful when you need to show large amount of data. It only render the DOM elements it needs. It has less functionality compared to other virtual list libraries but it's under 5kb before gzip

Netlify Status

Demo and Documentation

Getting started

To install the package in your application just type

npm install vue-virtualized-list

Then, to install as a global component

import Vue from "vue";
import VirtualizedList from "vue-virtualized-list";

Vue.component("virtualized-list", VirtualizedList)

Or you can register locally in one of your components as follows

import VirtualizedList from "vue-virtualized-list";

export default {
    name: "AmazingComponent",
    props: [myprop],
    components: {
        "virtualized-list": VirtualizedList
    }
}

Using it

<virtualized-list :items="list" :item-height="itemH">
    <template v-slot="{ item, index}">
        <div class="my-item-class">
           #{{ index }} {{item.id}}: {{ item.content }}
        </div>
    </template>
</virtualized-list>
export default {
  data() {
    // create an long array
    const fillArrayWithNumbers = n => Array.apply(null, Array(n)).map((x, i) => i);

    return {
      list: fillArrayWithNumbers(15000).map(i => ({id: i, content: "content-" + i})),
      itemH: 25
    }
  }
}

Parameters and events

Props

| Name | Type | Mandatory | Example | Default value | Description | |---------------------|--------|-----------|-------------------|--------------------------------|--------------------------------| | items | Array | true | - | - | The list of items | | itemHeight | Number | true | 100 | - | The height of each item (in px) | | outerContainerEl | String | false | "div" | "div" | The type of the outer element (no matter the element, some css properties are necessary, e.g. display: block) | | outerContainerClass | String | false | "my-class" | "vue-virtualized-list" | Class of the outer element | | innerContainerEl | String | false | "div" | "div" | The type of the inner element, the scrollable one (no matter the element, some css properties are necessary, e.g. display: block and position: relative) | | innerContainerClass | String | false | "my-class__inner" | "vue-virtualized-list__scroll" | Class of the inner element | | bench | Number | false | 10 | 5 | The number of non-visible items to render before the first visible and after the last (if a user scrolls very fast without bench items there might be a short amount of time where not items are rendered. Increasing the bench will decrease this issue but it also increases the rendering cost. Most of the time leaving the default value works just fine) | | | | | | | |

Events

It does not emit any event

API

| Name | parameters | return value | Description | |---------|------------|--------------|---------------------------------| | update | none | undefined | Tells the component to recalculate the visible items. This can be useful in certain cases, for example if you change the height of the container | | scrollTo | index (Number) | undefined | Scroll to the given index |

Changelog

1.1.0

New features

  • Add new API scrollTo(index)

1.0.0

New features

  • Index is passed to slot scope

Breaking change

  • Migrating from 0.1.0: replace provided by provided.item or replace v-slot="provided" by v-slot="{ item }" then use item

0.1.0

New features

  • Add bench prop
  • Add update api

0.0.3

  • Initial release

Contributing

Project setup
npm install
Compiles and hot-reloads for development
npm run dev
Compiles and minifies for production
npm run build

Documentation is done using vuepress.

Compiles and watch docs
npm run docs:dev
Compiles and bundle documentation
npm run docs:build
Run all the tests
npm run test
Run unit tests
npm run test:unit

Or you can run them in watch mode

npm run test:unit:w
Run end-to-end tests
npm run test:e2e

Or you can run them in watch mode with amazing cypress experience

npm run test:e2e:w
Customize configuration

See Configuration Reference.

Author and License

Alberto De Agostini

Licensed under MIT