npmpackage.info

Gathering detailed insights and metrics for vue-virtual-scroll-grid

Other packages similar to vue-virtual-scroll-grid

virtua

0.41.0

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.

@revolist/revogrid

4.15.8

Virtual reactive data grid spreadsheet component - RevoGrid.

@revolist/vue-datagrid

4.15.7

Vue 2 DataGrid Spreadsheet component with native Vue 2 render support

@revolist/vue3-datagrid

4.15.7

Vue 3 DataGrid Spreadsheet component with native Vue 3 cell render support

Gathering detailed insights and metrics for vue-virtual-scroll-grid

vue-virtual-scroll-grid - 1.11.0 | npmpackage.info

vue-virtual-scroll-grid

A Vue 3 component that can render a list with 1000+ items as a grid in a performant way.

1.11.0

311

MIT

Vue

15.51 kB

247,220 3.4

Installations

npm install vue-virtual-scroll-grid

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Min. Node Version

>=14

Node Version

20.9.0

NPM Version

10.2.2 Pull Requests

Open

0

Total

266

Closed

36

Merged

230

Issues

Open

1

Total

32

Closed

31

Releases

v1.11.0

Updated on Oct 31, 2023

v1.10.2

Updated on Apr 01, 2023

v1.10.1

Updated on Dec 20, 2022

v1.10.0

Updated on Oct 14, 2022

v1.9.0

Updated on Sep 29, 2022

v1.8.0

Updated on Sep 27, 2022

View All 23 releases

Languages

Vue

TypeScript

CSS

JavaScript

HTML

Vue (47.1%)

TypeScript (46.6%)

CSS (4.27%)

JavaScript (1.51%)

HTML (0.52%)

Developer

rocwang

Download Statistics

Total Downloads

247,220

Last Day

616

Last Week

2,420

Last Month

10,578

Last Year

156,489

GitHub Statistics

MIT License

311 Stars

443 Commits

33 Forks

4 Watchers

1 Branches

6 Contributors

Updated on Apr 29, 2025

Bundle Size

52.43 kB

Minified

15.51 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 6 Contributors

Package Meta Information

Latest Version

1.11.0

Package Id

vue-virtual-scroll-grid@1.11.0

Unpacked Size

665.33 kB

Size

122.87 kB

File Count

NPM Version

10.2.2

Node Version

20.9.0

Published on

Oct 31, 2023

Total Downloads

Cumulative downloads

Total Downloads

247,220

Last Day

64.3%

616

Compared to previous day

Last Week

22.4%

2,420

Compared to previous week

Last Month

-40.8%

10,578

Compared to previous month

Last Year

134.8%

156,489

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Virtual Scroll Grid for Vue 3

This is a reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Features

Use virtual-scrolling / windowing to render the items, so the number of DOM nodes is kept low.
Just use CSS grid to style your grid. Minimum styling opinions form the library.
Support using a paginated API to load the items in the background.
Support rendering placeholders for unloaded items.
Support both vertical and horizontal scroll.
Loaded items are cached for better performance.

Code Examples

Install

1npm install vue-virtual-scroll-grid

Available Props

Name	Description	Type	Validation
`length`	The number of items in the list	`number`	Required, an integer greater than or equal to 0
`pageProvider`	The callback that returns a page of items as a promise. `pageNumber` start with 0	`(pageNumber: number, pageSize: number) => Promise<unknown[]>`	Required
`pageSize`	The number of items in a page from the item provider (e.g. a backend API)	`number`	Required, an integer greater than or equal to 1
`pageProviderDebounceTime`	Debounce window in milliseconds on the calls to `pageProvider`	`number`	Optional, an integer greater than or equal to 0, defaults to `0`
`probeTag`	The HTML tag used as probe element. Default value is `div`	`string`	Optional, any valid HTML tag, defaults to `div`
`respectScrollToOnResize`	Snap to the position set by `scrollTo` when the grid container is resized	`boolean`	Optional, defaults to `false`
`scrollBehavior`	The behavior of `scrollTo`. Default value is `smooth`	`smooth` \| `auto`	Optional, a string to be `smooth` or `auto`, defaults to `smooth`
`scrollTo`	Scroll to a specific item by index	`number`	Optional, an integer from 0 to the `length` prop - 1, defaults to 0
`tag`	The HTML tag used as container element. Default value is `div`	`string`	Optional, any valid HTML tag, defaults to `div`
`getKey`	The `:key` used on each grid item. Auto-generated, but overwritable via function	`(internalItem: InternalItem) => number \| string` ¹	Optional, any valid Function that returns a `string` or `number`

Example:

1<Grid
2  :length="1000"
3  :pageProvider="async (pageNumber, pageSize) => Array(pageSize).fill('x')"
4  :pageSize="40"
5  :scrollTo="10"
6>
7<!-- ...slots -->
8</Grid>

Available Slots

There are 3 scoped slots: default, placeholder and probe.

The `default` slot

The default slot is used to render a loaded item.

Props:

item: the loaded item that is used for rendering your item element/component.
index: the index of current item within the list.
style: the style object provided by the library that need to be set on the item element/component.

Example:

1<template v-slot:default="{ item, style, index }">
2  <div :style="style">{{ item }} {{ index }}</div>
3</template>

The`placeholder` slot

When an item is not loaded, the component/element in the placeholder slot will be used for rendering. The placeholder slot is optional. If missing, the space of unloaded items will be blank until they are loaded.

Props:

index: the index of current item within the list.
style: the style object provided by the library that need to be set on the item element/component.

Example:

1<template v-slot:placeholder="{ index, style }">
2  <div :style="style">Placeholder {{ index }}</div>
3</template>

The `probe` slot

The probe slot is used to measure the visual size of grid item. It has no prop. You can pass the same element/component for the placeholder slot. If not provided, you must set a fixed height to grid-template-rows on your CSS grid, e.g. 200px. If provided, make sure it is styled with the same dimensions as rendered items in the default or placeholder slot. Otherwise, the view wouldn't be rendered properly, or the rendering could be very slow.

Example:

1<template v-slot:probe>
2  <div class="item">Probe</div>
3</template>

Exposed Public Properties

allItems: All items memoized by the grid

Scroll Mode

The library uses grid-auto-flow CSS property to infer scroll mode. Set it to column value if you want to enable horizontal scroll.

Caveats

The library does not require items have foreknown width and height, but do require them to be styled with the same width and height under a view. E.g. the items can be 200px x 200px when the view is under 768px and 300px x 500px above 768px.

Development

Required environment variables:

VITE_APP_ID: An Algolia app ID
VITE_SEARCH_ONLY_API_KEY: The search API key for the Algolia app above

Setup: npm install
Run dev server: npm run dev
Lint (type check): npm run lint
Build the library: npm run build
Build the demo: npm run build -- --mode=demo
Preview the locally built demo: npm run serve

How to Release a New Version

We use semantic-release to release the library on npm automatically.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.4

/10

Last Scanned on 2025-04-28

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-virtual-scroll-grid

Other packages similar to vue-virtual-scroll-grid

vue-virtual-scroll-grid

Installations

Developer Guide

Yes

CommonJS, ESM

>=14

20.9.0

10.2.2

Pull Requests

0

266

36

230

Issues

1

32

31

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

52.43 kB

15.51 kB

Maintainers

Package Meta Information

Total Downloads

247,220

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Virtual Scroll Grid for Vue 3

Features

Code Examples

Install

Available Props

Available Slots

The default slot

Theplaceholder slot

The probe slot

Exposed Public Properties

Scroll Mode

Caveats

Development

How to Release a New Version

10

10

10

7

2

0

0

0

0

0

0

0

3.4

/10

The `default` slot

The`placeholder` slot

The `probe` slot