Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react

What is React Virtualized?

Nouman Abbasi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

React Virtualized is a library of React components for the efficient rendering of large lists and tabular data.

Some of the available components are:

  • ArrowKeyStepper
  • AutoSizer
  • CellMeasurer
  • Collection
  • ColumnSizer
  • Grid
  • InfiniteLoader
  • List
  • Masonry
  • MultiGrid
  • Table
  • WindowScroller

Install

You can install react-virtualized using npm:

npm i react-virtualized

Code

In the example below, we use the List component.

Each List component requires a rowRenderer method that is responsible for rendering each list item.

We can also customize the List component by changing the height, width, and row height. We can also add CSS styling to the List itself or each row separately.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

The documentation for all available components, along with examples, is available here.

RELATED TAGS

react

CONTRIBUTOR

Nouman Abbasi
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring