Repolode
Предложить
bvaughn

bvaughn/react-virtualized

React-компоненты для эффективного отображения больших списков и таблиц: рендерятся только видимые строки и ячейки.

Открыть на GitHubСайт
Звёзды
27,069
Форки
3,017
Открытые issues
0
Последний коммит
3 дня назад

Что это?

react-virtualized — набор React-компонентов для отображения больших списков, сеток и таблиц без одновременного рендеринга всех элементов. Такие компоненты, как List, Grid, Table и Masonry, монтируют только ячейки, попадающие в область просмотра, поэтому большие наборы данных не замедляют рендеринг.

В пакет входит CellMeasurer для ячеек с заранее неизвестным размером, а также компоненты высшего порядка InfiniteLoader, ScrollSync, ColumnSizer и ArrowKeyStepper — для загрузки дополнительных данных, синхронизации прокрутки и обработки навигации с клавиатуры. Grid, List, Masonry и Table также могут прокручиваться вместе с окном браузера или другим прокручиваемым элементом. Пакет устанавливается через npm и включает типы TypeScript.

В проекте отмечают, что начиная с версии 10 AutoSizer вынесен в отдельный пакет react-virtualized-auto-sizer, и рекомендуют рассмотреть react-window как более лёгкую альтернативу для новых проектов.

Ключевые возможности

  • 01Виртуализированные компоненты List, Grid, Table и Masonry, которые рендерят только видимые ячейки.
  • 02CellMeasurer для измерения ячеек с динамическим размером.
  • 03InfiniteLoader для загрузки данных по мере прокрутки пользователем.
  • 04ScrollSync для синхронизации прокрутки нескольких областей.
  • 05Поддержка прокрутки окна браузера через свойство scrollElement.
  • 06Сборки ES и CommonJS с поддержкой tree shaking и типами TypeScript.

Сценарии использования

  • Отображение таблицы с тысячами строк в административной панели на React.
  • Создание сетки в стиле электронной таблицы с закреплёнными заголовками и столбцами.
  • Создание ленты или списка с бесконечной прокруткой и постраничной загрузкой.
  • Отображение длинного списка с элементами переменной высоты, например сообщений чата или логов.

Быстрый старт

  1. 1

    Установите react-virtualized с помощью npm

    npm install react-virtualized --save

Что важно знать

  • В README рекомендуется react-window как более лёгкая альтернатива для новых проектов.
  • В вашем проекте должны быть установлены peer dependencies react и react-dom.

Темы

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

Частые вопросы

Что такое react-virtualized?
React-компоненты для эффективного отображения больших списков и таблиц: рендерятся только видимые строки и ячейки. react-virtualized — набор React-компонентов для отображения больших списков, сеток и таблиц без одновременного рендеринга всех элементов. Такие компоненты, как List, Grid, Table и Masonry, монтируют только ячейки, попадающие в область просмотра, поэтому большие наборы данных не замедляют рендеринг.
react-virtualized можно использовать бесплатно? Какая у него лицензия?
react-virtualized распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
react-virtualized всё ещё поддерживается?
Активно поддерживается. Последний коммит в react-virtualized — 19 окт. 2026 г..
Для чего можно использовать react-virtualized?
Отображение таблицы с тысячами строк в административной панели на React. Создание сетки в стиле электронной таблицы с закреплёнными заголовками и столбцами. Создание ленты или списка с бесконечной прокруткой и постраничной загрузкой. Отображение длинного списка с элементами переменной высоты, например сообщений чата или логов.
Как установить react-virtualized?
Установите react-virtualized с помощью npm: npm install react-virtualized --save
Где скачать react-virtualized?
Исходный код и инструкции по установке — на GitHub: https://github.com/bvaughn/react-virtualized

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты