Skip to content

Feature Request: Virtual List Component #15

Description

@kottode

Problem

Large lists (1000+ items) cause performance issues in Tama because all items are inflated into the DOM. There's no built-in virtual scrolling solution.

Proposed Solution

A @denshya/virtual package or built-in VirtualList component that:

  1. Renders only visible items
  2. Supports variable height items
  3. Handles scroll events efficiently
  4. Provides smooth scrolling experience

Example API

import { VirtualList } from "@denshya/virtual"

function BigList() {
  const items = new StateArray(generateItems(10000))

  return (
    <VirtualList
      items={items}
      height={400}
      itemHeight={50}
      renderItem={(item) => (
        <div className="item">{item.name}</div>
      )}
    />
  )
}

Workaround

Currently requires manual implementation with scroll tracking and calculated ranges. See denshya-virtual-list-example experiment.

Priority

Medium — Important for performance but can be built in userland.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions