# svelte-virtual

> Virtual List and Grid components for Svelte

Latest version **0.6.3** (published 2024-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-virtual
pnpm add svelte-virtual
yarn add svelte-virtual
bun add svelte-virtual
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.6.3 |
| Published | 2024-02-26 |
| First published | 2022-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 73 |
| Author | Pedro Américo |
| Maintainers | ghostebony |
| Keywords | svelte, virtual, grid, list, scroll |

## Links

- npm: https://www.npmjs.com/package/svelte-virtual
- Repository: https://github.com/ghostebony/svelte-virtual
- Homepage: https://github.com/ghostebony/svelte-virtual#readme
- Issues: https://github.com/ghostebony/svelte-virtual/issues
- npm.io page: https://npm.io/package/svelte-virtual

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.6.3 (latest) — 2024-02-26
- 1.0.0-next.22 (next) — 2024-11-11
- 1.0.0-next.21 — 2024-10-29
- 1.0.0-next.20 — 2024-10-29
- 1.0.0-next.19 — 2024-10-28
- 1.0.0-next.18 — 2024-10-25
- 1.0.0-next.17 — 2024-01-31
- 1.0.0-next.16 — 2023-08-13
- 1.0.0-next.15 — 2023-06-24
- 1.0.0-next.14 — 2023-05-31
- 1.0.0-next.13 — 2023-05-02
- 1.0.0-next.12 — 2023-04-23
- 1.0.0-next.11 — 2023-04-20
- 1.0.0-next.10 — 2023-03-25
- 1.0.0-next.9 — 2023-03-04
- … 25 more at https://npm.io/package/svelte-virtual/versions

## README

# svelte-virtual

## About

Svelte components for efficiently rendering large lists. Instead of rendering all your data, svelte-virtual renders only what's visible

## ⚠️ New releases

New versions were released under the `next` release tag. Install it for new features and bug fixes.

### Installation

With npm:

```
npm i -D svelte-virtual@next
```

With yarn:

```
yarn add -D svelte-virtual@next
```

With pnpm:

```
pnpm add -D svelte-virtual@next
```

> @next [docs](https://github.com/ghostebony/svelte-virtual#readme)

---

## v0.6.3 Usage

### Vertical List [default] ([demo](https://svelte.dev/repl/70b159e914024f869180c28b8e7eb92d?version=3.49.0))

```svelte
<script>
	import { List } from "svelte-virtual";

	let items = [...Array(100000).keys()];
</script>

<List itemCount={items.length} itemSize={20} height={500}>
	<div slot="item" let:index let:style {style}>
		{items[index]}
	</div>
</List>
```

### Horizontal List ([demo](https://svelte.dev/repl/160a5bf2e2a8484c8ffd03b219f5eb27?version=3.49.0))

```svelte
<script>
	import { List } from "svelte-virtual";

	let items = [...Array(100000).keys()];
</script>

<List itemCount={items.length} itemSize={60} height={40} layout="horizontal">
	<div slot="item" let:index let:style {style}>
		{items[index]}
	</div>
</List>
```

### Grid ([demo](https://svelte.dev/repl/8e2b877da06c4532ae50482236abbcac?version=3.49.0))

```svelte
<script>
	import { Grid } from "svelte-virtual";

	let items = [...Array(100000).keys()];
</script>

<Grid itemCount={items.length} itemHeight={50} itemWidth={60} height={500}>
	<div slot="item" let:index let:style {style}>
		{items[index]}
	</div>
</Grid>
```

## Props

### List

| Property         | Type                         | Default      | Required? |
| :--------------- | :--------------------------- | :----------- | :-------: |
| itemCount        | `number`                     |              |     ✓     |
| itemSize         | `number`                     |              |     ✓     |
| height           | `number`                     |              |     ✓     |
| width            | `string`                     | `"100%"`     |           |
| overScan         | `number`                     | `1`          |           |
| marginLeft       | `number`                     | `0`          |           |
| marginTop        | `number`                     | `0`          |           |
| layout           | `"vertical" \| "horizontal"` | `"vertical"` |           |
| scrollToIndex    | `number \| undefined`        | `undefined`  |           |
| scrollToPosition | `number \| undefined`        | `undefined`  |           |
| scrollToBehavior | `"auto" \| "smooth"`         | `"auto"`     |           |

### Grid

| Property         | Type                  | Default     | Required? |
| :--------------- | :-------------------- | :---------- | :-------: |
| itemCount        | `number`              |             |     ✓     |
| itemHeight       | `number`              |             |     ✓     |
| itemWidth        | `number`              |             |     ✓     |
| height           | `number`              |             |     ✓     |
| width            | `string`              | `"100%"`    |           |
| overScan         | `number`              | `1`         |           |
| marginLeft       | `number`              | `0`         |           |
| marginTop        | `number`              | `0`         |           |
| scrollToIndex    | `number \| undefined` | `undefined` |           |
| scrollToPosition | `number \| undefined` | `undefined` |           |
| scrollToBehavior | `"auto" \| "smooth"`  | `"auto"`    |           |

## Methods ([demo](https://svelte.dev/repl/8efc42f67dc5493aabe465c589af62e7?version=3.49.0))

| Property          | Arguments          |
| :---------------- | :----------------- |
| scrollTo.index    | `index: number`    |
| scrollTo.position | `position: number` |

## Slots

-   `item` - Slot for each item
    -   Props:
        -   `index: number` - Item index
        -   `scrollPosition: number` - Item scroll position in the list
        -   `style: string` - Item style, must be applied to the slot (look above for example)
-   `header` - Slot for the elements that should appear at the top of the component
-   `footer` - Slot for the elements that should appear at the bottom of the component

## License

[MIT](./LICENSE)

---
_Source: https://npm.io/package/svelte-virtual · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._