Repolode
Enviar
bvaughn

bvaughn/react-virtualized

Componentes React para renderizar listas grandes e dados tabulares com eficiência, exibindo apenas as linhas e células visíveis.

Ver no GitHubSite
Estrelas
27,069
Forks
3,017
Issues abertas
0
Último commit
há 3 dias

O que é?

react-virtualized é um conjunto de componentes React para exibir listas, grades e tabelas grandes sem renderizar todos os itens de uma vez. Componentes como List, Grid, Table e Masonry montam apenas as células que estão no viewport, mantendo a renderização rápida mesmo com conjuntos de dados grandes.

O pacote inclui CellMeasurer para células cujo tamanho não é conhecido de antemão e componentes de ordem superior, como InfiniteLoader, ScrollSync, ColumnSizer e ArrowKeyStepper, para carregar mais dados, sincronizar posições de rolagem e lidar com a navegação pelo teclado. Grid, List, Masonry e Table também podem rolar junto com a janela ou com outro elemento rolável. A instalação é feita via npm, e o pacote inclui tipos do TypeScript.

O projeto informa que AutoSizer foi movido para o pacote separado react-virtualized-auto-sizer a partir da versão 10 e sugere react-window como uma alternativa mais leve para novos projetos.

Recursos principais

  • 01Componentes virtualizados List, Grid, Table e Masonry, que renderizam apenas as células visíveis.
  • 02CellMeasurer para medir células com tamanho dinâmico.
  • 03InfiniteLoader para carregar dados conforme a rolagem do usuário.
  • 04ScrollSync para manter várias áreas roláveis alinhadas.
  • 05Suporte à rolagem da janela por meio da prop scrollElement.
  • 06Builds tree-shakeable em ES e CommonJS, com tipos do TypeScript.

Casos de uso

  • Renderizar uma tabela com milhares de linhas em um painel administrativo React.
  • Criar uma grade semelhante a uma planilha, com cabeçalhos e colunas fixos.
  • Criar um feed ou uma lista com rolagem infinita, carregados página por página.
  • Exibir uma lista longa com itens de altura variável, como mensagens de chat ou logs.

Início rápido

  1. 1

    Instale react-virtualized com npm

    npm install react-virtualized --save

Antes de usar

  • O README recomenda react-window como uma alternativa mais leve para novos projetos.
  • As peer dependencies react e react-dom precisam estar instaladas no seu projeto.

Tópicos

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

Perguntas frequentes

O que é react-virtualized?
Componentes React para renderizar listas grandes e dados tabulares com eficiência, exibindo apenas as linhas e células visíveis. react-virtualized é um conjunto de componentes React para exibir listas, grades e tabelas grandes sem renderizar todos os itens de uma vez. Componentes como List, Grid, Table e Masonry montam apenas as células que estão no viewport, mantendo a renderização rápida mesmo com conjuntos de dados grandes.
react-virtualized é gratuito? Qual é a licença?
react-virtualized é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
react-virtualized ainda é mantido?
Manutenção ativa. O último commit de react-virtualized foi em 19 de out. de 2026.
Para que posso usar react-virtualized?
Renderizar uma tabela com milhares de linhas em um painel administrativo React. Criar uma grade semelhante a uma planilha, com cabeçalhos e colunas fixos. Criar um feed ou uma lista com rolagem infinita, carregados página por página. Exibir uma lista longa com itens de altura variável, como mensagens de chat ou logs.
Como instalar react-virtualized?
Instale react-virtualized com npm: npm install react-virtualized --save
Onde consigo react-virtualized?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/bvaughn/react-virtualized

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados