svelte-virtuallists Svelte Themes

Svelte Virtuallists

only renders the visible items.

Logo

svelte-virtuallists

Keep your page efficient and fast: only shows the visible items!

NPM VERSION publish size minified size deps contributors

AboutFeaturesUsageDemosSamples

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.

Installation

npm i svelte-virtuallists

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

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

Property Type Required? Description
items any[] the model, the data for the items to display in the list.
isHorizontal boolean (false) Whether the list should scroll vertically or horizontally. One of 'vertical' (default) or 'horizontal'.
isDisabled boolean (false) When the component is disabled it renders as a regular list
isTable boolean (false) Whether the rendering should be a table layout
sizeCalculator (index: number, item:any) => number alias SizingCalculatorFn Not recommended, as the component will adjust to the css rendering. If you need to control the sizing programmatically, use a function that returns the size (height or width) of the rendered row or column. This function's output is used for scrollbar positioning and is passed to the vl_slot.
scrollToOffset number(in pixels) Can be used to control the scrollbar offset in pixel. scrollToIndex and scrollToOffset MUST not be used together.
scrollToIndex number(item index) Moves the scrollbar to display the given item (at index). Follows scroll behavior and alignment policies. scrollToIndex and scrollToOffset MUST not be used together.
scrollToAlignment string (AUTO) Used in combination with scrollToIndex and scrollToOffset. Use 'start' to always align items to the top of the container and 'end' to align them bottom. Use 'center' to align them in the middle of the container. 'auto' scrolls the least amount possible to ensure that the specified scrollToIndex item is fully visible.
scrollToBehaviour string (AUTO) Used in combination with scrollToIndex and scrollToOffset, controls the scrolling behaviour movement. One of: 'auto', 'smooth' or 'instant' (default).

Snippets

Property Type Required? Description
vl_slot (index:number, item:any, size?:number) => SnippetResult Snippet called to render every item, see description below. Typescript signature VLSlotSignature
header () => SnippetResult Useful in table mode to render the table header columns.
footer () => SnippetResult Useful in table mode to render any table footer.

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

Property Type Required? Description
onAfterScroll {offset, event} Fired when the scrollbar changes position.
onVisibleRangeUpdate {start, end} Fired when the visible window is sliding to display new items
  • 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.

Top categories

Loading Svelte Themes