svelte-window

• Svelte components for efficiently rendering large, scrollable lists and tabular data (port of react-window to Svelte)
• Performance-focused approach: Only renders the visible portion of data to reduce initial load time, updates, and memory usage
• Key features:
  • Supports both fixed and variable size lists/grids
  • Includes scrolling functionality and scroll-to-item controls
  • Provides SSR-compatible components for SvelteKit
  • Offers bundle size optimization through direct imports

Components:

• FixedSizeList/FixedSizeListSSR - For fixed-height lists
• VariableSizeList/VariableSizeListSSR - For dynamic-height lists
• FixedSizeGrid/FixedSizeGridSSR - For fixed-size grids
• VariableSizeGrid/VariableSizeGridSSR - For dynamic-size grids

Key Differences from React-Window:

1. Uses Svelte's slot props (let:items) with each blocks for rendering
2. Requires style conversion via included styleString helper
3. Cache reset methods are accessed through .instance property

Target Audience:

• Svelte developers needing to display large datasets efficiently
• Applications dealing with:
  • Long lists (e.g., tables, feeds)
  • Complex grids (e.g., calendars, spreadsheets)
  • Virtualized scrolling interfaces

Related Libraries:

• `svelte-virtualized-auto-sizer` for responsive sizing

Learn More:

• Blog post about the porting process