react-virtualized vs vue-virtual-scroll-list vs ngx-virtual-scroller
Virtual Scrolling Libraries Comparison
Search packages..
1 Year
react-virtualizedvue-virtual-scroll-listngx-virtual-scrollerSimilar Packages:
What's Virtual Scrolling Libraries?

Virtual scrolling libraries are designed to efficiently render large lists of items by only displaying the items that are currently visible in the viewport. This improves performance and reduces memory usage, especially when dealing with extensive datasets. Each library is tailored for specific frameworks, providing optimized solutions for Angular, React, and Vue.js applications.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-virtualized1,033,42826,6412.24 MB2a month agoMIT
vue-virtual-scroll-list147,3844,45270.6 kB772 years agoMIT
ngx-virtual-scroller13,238982-1535 years agoMIT
Feature Comparison: react-virtualized vs vue-virtual-scroll-list vs ngx-virtual-scroller

Performance Optimization

  • react-virtualized:

    react-virtualized provides advanced performance optimizations, such as windowing and lazy loading, to ensure that only the visible items are rendered. It supports features like variable row heights and column resizing, which further enhance performance for complex layouts, making it suitable for applications that require high interactivity and responsiveness.

  • vue-virtual-scroll-list:

    vue-virtual-scroll-list achieves performance optimization by only rendering the visible items in a list, significantly reducing the number of DOM nodes created. It is lightweight and designed to handle large data sets efficiently, making it a great choice for Vue applications that need to display extensive lists without lag.

  • ngx-virtual-scroller:

    ngx-virtual-scroller optimizes performance by rendering only the items that are currently visible in the viewport. This minimizes DOM manipulation and improves rendering speed, making it ideal for applications with large datasets. It also supports dynamic heights, allowing for flexible item sizes without sacrificing performance.

Integration with Framework

  • react-virtualized:

    react-virtualized is tailored for React applications, providing a set of components that fit well within the React ecosystem. Its design allows for easy integration with React's state management and lifecycle methods, making it straightforward to implement in any React project.

  • vue-virtual-scroll-list:

    vue-virtual-scroll-list is designed for Vue.js, utilizing Vue's reactivity system to efficiently manage updates and rendering. Its API is intuitive for Vue developers, ensuring that it can be easily integrated into existing Vue applications without a steep learning curve.

  • ngx-virtual-scroller:

    ngx-virtual-scroller is specifically built for Angular, allowing for easy integration with Angular's component architecture and change detection. It leverages Angular's features to provide a seamless experience, making it a natural choice for Angular developers looking for virtual scrolling solutions.

Feature Set

  • react-virtualized:

    react-virtualized boasts a rich feature set, including support for fixed and variable item sizes, scrolling to specific items, and customizable cell rendering. This makes it highly versatile for complex applications that require detailed control over list rendering and performance.

  • vue-virtual-scroll-list:

    vue-virtual-scroll-list provides a simple yet effective feature set, focusing on ease of use and performance. It supports dynamic heights and offers a straightforward API for rendering lists, making it a great choice for developers who need a quick and efficient solution.

  • ngx-virtual-scroller:

    ngx-virtual-scroller offers essential features for virtual scrolling, including support for dynamic item heights and customizable item rendering. Its simplicity makes it easy to implement, but it may lack some advanced features found in other libraries, making it best suited for straightforward use cases.

Learning Curve

  • react-virtualized:

    react-virtualized may have a steeper learning curve due to its extensive feature set and the need to understand React's component lifecycle. However, once mastered, it provides powerful tools for building high-performance applications.

  • vue-virtual-scroll-list:

    vue-virtual-scroll-list is easy to learn for Vue developers, with a simple API that allows for rapid implementation. Its focus on performance and ease of use makes it accessible for those new to virtual scrolling.

  • ngx-virtual-scroller:

    ngx-virtual-scroller has a gentle learning curve, especially for developers familiar with Angular. Its API is straightforward, allowing for quick implementation of virtual scrolling without extensive configuration or setup.

Community and Support

  • react-virtualized:

    react-virtualized benefits from a large and active community, with extensive documentation and numerous examples available. This support makes it easier for developers to find solutions to common issues and best practices for implementation.

  • vue-virtual-scroll-list:

    vue-virtual-scroll-list has a smaller community compared to React libraries but is well-documented and actively maintained. The support available is adequate for most use cases, especially for developers familiar with Vue.

  • ngx-virtual-scroller:

    ngx-virtual-scroller has a growing community within the Angular ecosystem, but it may not have as extensive documentation or community support as more established libraries. However, it is actively maintained and receives updates from its contributors.

How to Choose: react-virtualized vs vue-virtual-scroll-list vs ngx-virtual-scroller
  • react-virtualized:

    Select react-virtualized if you are working with React and require a comprehensive set of features for handling large data sets, including support for variable row heights and complex layouts. It offers a robust set of components and utilities for building high-performance scrollable lists and tables.

  • vue-virtual-scroll-list:

    Opt for vue-virtual-scroll-list when developing with Vue.js and you need an efficient way to display long lists. This library is designed to be simple to use and integrates well with Vue's reactivity system, making it suitable for applications that require dynamic updates.

  • ngx-virtual-scroller:

    Choose ngx-virtual-scroller if you are developing an Angular application and need a lightweight solution for rendering large lists with minimal overhead. It integrates seamlessly with Angular's change detection and provides a straightforward API for implementing virtual scrolling.

Similar Npm Packages to react-virtualized

react-virtualized is a powerful library for efficiently rendering large lists and tabular data in React applications. It provides a set of components that help optimize rendering performance by only displaying the items that are currently visible in the viewport, thereby reducing the number of DOM nodes and improving overall performance. While react-virtualized is a popular choice for virtualization, there are several alternatives available in the React ecosystem. Here are a few noteworthy options:

  • react-infinite is a library designed for creating infinite scrolling lists in React applications. It allows developers to easily implement a scrolling mechanism that loads more items as the user scrolls down. While it focuses on infinite scrolling, it does not provide the same level of virtualization as react-virtualized, making it suitable for scenarios where you want to load more data dynamically without the need for complex virtualization logic.
  • react-list is a lightweight library that provides a simple way to render large lists in React. It offers a virtualized list component that efficiently renders only the visible items, similar to react-virtualized. However, react-list is designed to be more straightforward and easier to use, making it a good choice for developers who want a simple solution for rendering large lists without the overhead of more complex libraries.
  • react-tiny-virtual-list is a minimalistic virtualized list component for React. It aims to provide a lightweight and efficient way to render large lists while maintaining a small bundle size. If you're looking for a simple and efficient solution for virtualizing lists without the additional features and complexity of larger libraries, react-tiny-virtual-list is an excellent option.
  • react-window is another lightweight library for rendering large lists and tabular data in React. It is a smaller and simpler alternative to react-virtualized, focusing on performance and ease of use. React-window provides a set of components for efficiently rendering lists and grids while keeping the API straightforward and intuitive. If you need a more minimalistic approach to virtualization, react-window is a great choice.

For a detailed comparison of these libraries, check out: Comparing react-infinite vs react-list vs react-tiny-virtual-list vs react-virtualized vs react-window.

Similar Npm Packages to vue-virtual-scroll-list

vue-virtual-scroll-list is a Vue.js component that provides a virtual scrolling solution for rendering large lists efficiently. By only rendering the items that are visible in the viewport, it significantly improves performance and reduces memory consumption, making it ideal for applications that need to display long lists of data. This library is particularly useful in scenarios where performance is critical, such as in data-heavy applications or when working with large datasets.

While vue-virtual-scroll-list is a great option for Vue.js applications, there are alternatives available for different frameworks:

  • ngx-virtual-scroller is a virtual scrolling library specifically designed for Angular applications. It allows developers to create scrollable lists that only render the visible items, similar to vue-virtual-scroll-list. This library is built with Angular's change detection in mind, ensuring optimal performance while maintaining a smooth user experience. If you are developing an Angular application and need a solution for efficiently rendering large lists, ngx-virtual-scroller is a solid choice.
  • react-virtualized is a popular library for React applications that provides a set of components for efficiently rendering large lists and tabular data. It offers a wide range of features, including virtual scrolling, cell measurement, and dynamic row heights, making it suitable for complex data visualization scenarios. If you're working with React and need a comprehensive solution for rendering large datasets, react-virtualized is a powerful option that can handle various use cases.

To see how vue-virtual-scroll-list compares with ngx-virtual-scroller and react-virtualized, check out the comparison: Comparing ngx-virtual-scroller vs react-virtualized vs vue-virtual-scroll-list.

Similar Npm Packages to ngx-virtual-scroller

ngx-virtual-scroller is an Angular library designed to efficiently render large lists of items by only displaying the items that are currently visible in the viewport. This approach, known as "virtual scrolling," significantly improves performance and user experience, especially when dealing with extensive datasets. While ngx-virtual-scroller is a robust solution for Angular applications, there are several alternatives available for different frameworks. Here are a few notable options:

  • ngx-infinite-scroll is another Angular library that provides an easy way to implement infinite scrolling in your applications. Unlike virtual scrolling, which focuses on rendering only the visible items, infinite scrolling loads more items as the user scrolls down the page. This is particularly useful for scenarios where data is fetched from an API in chunks. If your application requires a seamless loading experience as users scroll, ngx-infinite-scroll is a great choice.

  • react-infinite-scroll-component is a popular library for React applications that enables infinite scrolling functionality. It allows developers to easily implement a loading mechanism that fetches more data as the user scrolls down. This library is straightforward to use and integrates well with existing React components, making it an excellent option for React developers looking to enhance their applications with infinite scrolling capabilities.

  • react-virtualized is a comprehensive library for React that provides a suite of components for efficiently rendering large lists and tabular data. It includes features for both virtual scrolling and infinite scrolling, making it a versatile choice for developers who need to handle extensive datasets. react-virtualized is particularly beneficial for applications that require complex data structures and advanced rendering techniques.

  • react-window is a smaller, more lightweight alternative to react-virtualized, focusing solely on virtual scrolling. It is designed to be easy to use and highly performant, making it an excellent choice for React applications that need to render long lists without the overhead of additional features. If you want a simple and efficient solution for virtual scrolling, react-window is worth considering.

  • vue-virtual-scroller is a library for Vue.js applications that implements virtual scrolling. Similar to ngx-virtual-scroller, it efficiently renders only the items in view, improving performance for large lists. If you are working with Vue and need a solution for virtual scrolling, vue-virtual-scroller provides a straightforward and effective way to manage large datasets.

To explore the differences and similarities among these packages, check out the comparison: Comparing ngx-infinite-scroll vs ngx-virtual-scroller vs react-infinite-scroll-component vs react-virtualized vs react-window vs vue-virtual-scroller.

README for react-virtualized

React virtualized

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples.

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee

Sponsors

The following wonderful companies have sponsored react-virtualized:

Learn more about becoming a sponsor!

A word about react-window

If you're considering adding react-virtualized to a project, take a look at react-window as a possible lighter-weight alternative. Learn more about how the two libraries compare here.

Getting started

Install react-virtualized using npm.

npm install react-virtualized --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';

// You can import any component you want as a named export from 'react-virtualized', eg
import {Column, Table} from 'react-virtualized';

// But if you only use a few react-virtualized components,
// And you're concerned about increasing your application's bundle size,
// You can directly import only the components you need, like so:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';

Note webpack 4 makes this optimization itself, see the documentation.

If the above syntax looks too cumbersome, or you import react-virtualized components from a lot of places, you can also configure a Webpack alias. For example:

// Partial webpack.config.js
{
  alias: {
    'react-virtualized/List': 'react-virtualized/dist/es/List',
  },
  ...rest
}

Then you can just import like so:

import List from 'react-virtualized/List';

// Now you can use <List {...props} />

You can also use a global-friendly UMD build:

<link rel="stylesheet" href="path-to-react-virtualized/styles.css" />
<script src="path-to-react-virtualized/dist/umd/react-virtualized.js"></script>

Now you're ready to start using the components. You can learn more about which components react-virtualized has to offer below.

Dependencies

React Virtualized has very few dependencies and most are managed by NPM automatically. However the following peer dependencies must be specified by your project in order to avoid version conflicts: react, react-dom. NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.

Pure Components

By default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed. This occasionally confuses users when a collection's data changes (eg ['a','b','c'] => ['d','e','f']) but props do not (eg array.length).

The solution to this is to let react-virtualized know that something external has changed. This can be done a couple of different ways.

Pass-thru props

The shallowCompare method will detect changes to any props, even if they aren't declared as propTypes. This means you can also pass through additional properties that affect cell rendering to ensure changes are detected. For example, if you're using List to render a list of items that may be re-sorted after initial render- react-virtualized would not normally detect the sort operation because none of the properties it deals with change. However you can pass through the additional sort property to trigger a re-render. For example:

<List {...listProps} sortBy={sortBy} />
Public methods

Grid and Collection components can be forcefully re-rendered using forceUpdate. For Table and List, you'll need to call forceUpdateGrid to ensure that the inner Grid is also updated. For MultiGrid, you'll need to call forceUpdateGrids to ensure that the inner Grids are updated.

Documentation

API documentation available here.

There are also a couple of how-to guides:

Examples

Examples for each component can be seen in the documentation.

Here are some online demos of each component:

And here are some "recipe" type demos:

Supported Browsers

react-virtualized aims to support all evergreen browsers and recent mobile browsers for iOS and Android. IE 9+ is also supported (although IE 9 will require some user-defined, custom CSS since flexbox layout is not supported).

If you find a browser-specific problem, please report it along with a repro case. The easiest way to do this is probably by forking this Plunker.

Friends

Here are some great components built on top of react-virtualized:

  • react-infinite-calendar: Infinite scrolling date-picker with localization, themes, keyboard support, and more
  • react-sortable-hoc: Higher-order components to turn any list into an animated, touch-friendly, sortable list
  • react-sortable-tree: Drag-and-drop sortable representation of hierarchical data
  • react-virtualized-checkbox: Checkbox group component with virtualization for large number of options
  • react-virtualized-select: Drop-down menu for React with windowing to support large numbers of options.
  • react-virtualized-tree: A reactive tree component that aims to render large sets of tree structured data in an elegant and performant way
  • react-timeline-9000: A calendar timeline component that is capable of displaying and interacting with a large number of items

Contributions

Use GitHub issues for requests.

I actively welcome pull requests; learn how to contribute.

Changelog

Changes are tracked in the changelog.

License

react-virtualized is available under the MIT License.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.