Repolode
Enviar
bvaughn

bvaughn/react-virtualized

Componentes de React para mostrar listas grandes y datos tabulares de forma eficiente, renderizando solo las filas y celdas visibles.

Ver en GitHubSitio web
Estrellas
27,069
Forks
3,017
Issues abiertos
0
Último commit
hace 3 días

¿Qué es?

react-virtualized es un conjunto de componentes de React para mostrar listas, cuadrículas y tablas grandes sin renderizar todos los elementos a la vez. Componentes como List, Grid, Table y Masonry solo montan las celdas que están en el viewport, lo que mantiene el renderizado rápido cuando el conjunto de datos es grande.

El paquete incluye CellMeasurer para las celdas cuyo tamaño se desconoce de antemano y componentes de orden superior como InfiniteLoader, ScrollSync, ColumnSizer y ArrowKeyStepper para cargar más datos, sincronizar las posiciones de desplazamiento y gestionar la navegación con el teclado. Grid, List, Masonry y Table también pueden desplazarse con la ventana o con otro elemento desplazable. Se instala mediante npm e incluye tipos de TypeScript.

El proyecto indica que AutoSizer pasó al paquete independiente react-virtualized-auto-sizer a partir de la versión 10 y recomienda react-window como alternativa más ligera para proyectos nuevos.

Funciones clave

  • 01Componentes virtualizados List, Grid, Table y Masonry que renderizan solo las celdas visibles.
  • 02CellMeasurer para medir celdas de tamaño dinámico.
  • 03InfiniteLoader para cargar datos a medida que el usuario se desplaza.
  • 04ScrollSync para mantener alineadas varias áreas desplazables.
  • 05Compatibilidad con el desplazamiento de la ventana mediante la propiedad scrollElement.
  • 06Builds de ES y CommonJS compatibles con tree shaking, con tipos de TypeScript.

Casos de uso

  • Mostrar una tabla con miles de filas en un panel de administración de React.
  • Crear una cuadrícula similar a una hoja de cálculo, con encabezados y columnas fijos.
  • Crear un feed o una lista con desplazamiento infinito que se carga página por página.
  • Mostrar una lista larga de altura variable, como mensajes de chat o registros.

Inicio rápido

  1. 1

    Instala react-virtualized con npm

    npm install react-virtualized --save

Antes de usarlo

  • El README recomienda react-window como una alternativa más ligera para proyectos nuevos.
  • Tu proyecto debe tener instaladas las peer dependencies react y react-dom.

Temas

#react#virtualization#windowing#table#list#grid#performance#typescript#listview#react-components

Preguntas frecuentes

¿Qué es react-virtualized?
Componentes de React para mostrar listas grandes y datos tabulares de forma eficiente, renderizando solo las filas y celdas visibles. react-virtualized es un conjunto de componentes de React para mostrar listas, cuadrículas y tablas grandes sin renderizar todos los elementos a la vez. Componentes como List, Grid, Table y Masonry solo montan las celdas que están en el viewport, lo que mantiene el renderizado rápido cuando el conjunto de datos es grande.
¿react-virtualized es gratuito? ¿Qué licencia tiene?
react-virtualized es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-virtualized sigue mantenido?
Mantenimiento activo. El último commit de react-virtualized fue el 19 oct 2026.
¿Para qué puedo usar react-virtualized?
Mostrar una tabla con miles de filas en un panel de administración de React. Crear una cuadrícula similar a una hoja de cálculo, con encabezados y columnas fijos. Crear un feed o una lista con desplazamiento infinito que se carga página por página. Mostrar una lista larga de altura variable, como mensajes de chat o registros.
¿Cómo se instala react-virtualized?
Instala react-virtualized con npm: npm install react-virtualized --save
¿Dónde consigo react-virtualized?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/bvaughn/react-virtualized

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados