skills.rest
petyosi
petyosiCOMMUNITY
Explore all skills by this author →
𝕏@petyosiGitHub

react-virtuoso

Virtualize large lists, grids, and tables in React with automatic item size measurement.

6.4k|353|Updated May 3, 2019
Search Tags:#react#tables#virtualization#lists#grouping#infinite-scroll#grids
One-click install
npx skills add https://github.com/petyosi/react-virtuoso --skill react-virtuoso-petyosi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-virtuoso
Source: https://github.com/petyosi/react-virtuoso/tree/main/plugins/virtuoso-skills/skills/react-virtuoso
Command: npx skills add https://github.com/petyosi/react-virtuoso --skill react-virtuoso-petyosi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rendering extremely large lists, grids, and tables in React can cause performance bottlenecks because all items would need to render at once. React Virtuoso solves this by virtualization, rendering only the visible items and measuring sizes automatically.

Core Features & Use Cases

  • Variable item sizes are supported out of the box with automatic height measurement.
  • Grouped lists with sticky headers, endless scrolling, and table virtualization across responsive layouts.
  • Works with horizontal mode, window scrolling, and programmable scrolling APIs to drive complex UIs.

Quick Start

Install react-virtuoso and render a Virtuoso component with a fixed height container, a data or totalCount source, and an itemContent renderer.

Frequently Asked Questions about react-virtuoso

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render large React lists without freezing the browser?▼

Virtualize large React lists by rendering only the visible items instead of the entire dataset. This reduces the rendering workload and eliminates performance bottlenecks associated with displaying massive lists at once.

Does list virtualization support variable item sizes automatically?▼

Variable item sizes are supported out of the box through automatic item size measurement. The virtualization mechanism dynamically calculates heights, so you do not need to specify fixed dimensions for each item.

Can I build grouped lists with sticky headers and endless scrolling in React?▼

Grouped lists with sticky headers and endless scrolling are supported across responsive layouts. You can render grouped data structures and load more content dynamically as the user scrolls.

What is the best way to virtualize tables in React?▼

Table virtualization in React is best handled by rendering only the visible rows and measuring sizes automatically. This approach supports responsive layouts and programmable scrolling APIs for complex table UIs.

How do I get started with virtualizing a React list component?▼

Install the virtualization component and render it within a fixed-height container. Provide your data source or total count, and use an itemContent renderer to display your data-driven items.

Does React list virtualization work with horizontal scrolling and window scrolling?▼

Horizontal mode and window scrolling are supported alongside programmable scrolling APIs. This allows you to drive complex UIs that require scrolling beyond the standard vertical list layout.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
21

el-table-v2

Render large datasets in a virtualized table component with fixed columns and custom cell renderers.

Community
Advanced
TanStackTanStack
28.3k

react/compose-with-tanstack-virtual

Virtualize TanStack Table rows with useVirtualizer and getVirtualItems.

Official
Advanced
goddard-aigoddard-ai

react-virtuoso

Render large React lists and grids efficiently using Virtuoso.

Official
Intermediate
bovinphangbovinphang
21

fec-list-virtualization

Virtualize large DOM lists in React, Vue, or other frameworks.

Community
Advanced