svelte-virtuallists v1.3.9

About

Keep your tables and lists efficient and fast: only render the visible items, instead of displaying all your data in large lists.

This package is a merge of svelte-tiny-virtual-list and he-virtual-list, ported to Svelte 5. I spend many many hours to learn and build an improved version. Many thanks to the original authors.

Features

• ❺❺➎⓹⓹ Svelte 5+ only Build for Svelte 5+ in Typescript.

• 🚀 Performant Render millions of items, without breaking a sweat.

• 🛠 Configurable Customize width, heigh, position, style, content.

• 💠 Layout Control Headless, support fixed and variables sizing, along with vertical and horizontal lists and tables.

• 🧩 Programming Interface Set positions and properties, raises events on state mutation.

• 💼 Small Compact and dependency free – Only ~5kb when compressed.

Usage

This component can be used two different ways:

• 🤖 As a scrollable listover a large number of items, optionally read incrementally.

• 🧠 As a fondation for more complex components - TreeViews and DataGrids.

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Star History

Demos

• REPL Demo Will eventually work when REPL is out of BETA
• More complex demos and examples

Samples

<script>
	import { VirtualList } from 'svelte-virtuallists';

	const data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
</script>

<VirtualList class='mystyle' style='width:100%;height=600px' items={data}>
	{#snippet vl_slot({ index, item })}
		<div>
			Row: #{index} Item: {item}
		</div>
	{/snippet}
</VirtualList>

Props

The component accepts the following properties

Snippets

For instance,

<VirtualList items={myModel} style="height:600px">
  {#snippet vl_slot({ index, item }: VLSlotSignature)}
    <div style="border: 1px solid rgb(204, 204, 204);">
      Index:{index} Content:{item.text}
    </div>
  {/snippet}
</VirtualList>

Events

• onAfterScroll

Accepts a function with the following signature (event):VLScrollEvent => void

export interface VLScrollEvent {
  // either the value of `wrapper.scrollTop` or `wrapper.scrollLeft`
  offset: number | string;
  // the original event
  event: Event;
}

• onVisibleRangeUpdate

Accepts a function with the following signature (range):VLRangeEvent => void

export interface VLRangeEvent {
  // index of the first visible item
  start: number;
  // index of the last visible item
  end: number;
}

Contributing

Please read CODE OF CONDUCT and the CONTRIBUTION guide for more details.