React components for efficiently rendering large lists and tabular data

Related tags

React react-window
Overview

react-window

React components for efficiently rendering large lists and tabular data

React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

  1. It reduces the amount of work (and time) required to render the initial view and to process updates.
  2. It reduces the memory footprint by avoiding over-allocation of DOM nodes.

NPM registry Travis NPM license

Install

# Yarn
yarn add react-window

# NPM
npm install --save react-window

Usage

Learn more at react-window.now.sh:

Related libraries

  • react-virtualized-auto-sizer: HOC that grows to fit all of the available space and passes the width and height values to its child.
  • react-window-infinite-loader: Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
  • react-vtree: Lightweight and flexible solution to render large tree structures (e.g., file system).

Frequently asked questions

How is react-window different from react-virtualized?

I wrote react-virtualized several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.

react-window is a complete rewrite of react-virtualized. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package smaller1 and faster. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).

If react-window provides the functionality your project needs, I would strongly recommend using it instead of react-virtualized. However if you need features that only react-virtualized provides, you have two options:

  1. Use react-virtualized. (It's still widely used by a lot of successful projects!)
  2. Create a component that decorates one of the react-window primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! ๐Ÿ™‚

1 - Adding a react-virtualized list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a react-window list to a CRA project increases the (gzipped) build size by <2 KB.

Can a list or a grid fill 100% the width or height of a page?

Yes. I recommend using the react-virtualized-auto-sizer package:

screen shot 2019-03-07 at 7 29 08 pm

Here's a Code Sandbox demo.

Why is my list blank when I scroll?

If your list looks something like this...

...then you probably forgot to use the style parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!

screen shot 2019-03-07 at 7 21 48 pm

Can I lazy load data for my list?

Yes. I recommend using the react-window-infinite-loader package:

screen shot 2019-03-07 at 7 32 32 pm

Here's a Code Sandbox demo.

Can I attach custom properties or event handlers?

Yes, using the outerElementType prop.

Screen Shot 2019-03-12 at 8 58 09 AM

Here's a Code Sandbox demo.

Can I add padding to the top and bottom of a list?

Yes, although it requires a bit of inline styling.

Screen Shot 2019-06-02 at 8 38 18 PM

Here's a Code Sandbox demo.

Can I add gutter or padding between items?

Yes, although it requires a bit of inline styling.

Screen Shot 2019-03-26 at 6 33 56 PM

Here's a Code Sandbox demo.

Does this library support "sticky" items?

Yes, although it requires a small amount of user code. Here's a Code Sandbox demo.

License

MIT ยฉ bvaughn

Comments
  • Compatibility with ScrollSync

    Compatibility with ScrollSync

    I have a use case where i need to create a Grid that has fixed headers that stay pinned to the top. In react-virtualized this could be accomplished by creating two grid components (one for headers, one for the grid body) and synchronizing the scroll position so the header grid's horizontal scrolling is synced up with the main grid.

    I know that you are trying to keep react-window lighter weight, both in terms of bundle size and conceptual complexity, in favor of building additional functionality as separate packages. That is a direction that I agree with. I think that the ScrollSync component from react-virtualized could be extracted or adapted to work with react-window. However, in order to do so, react-window would need to accept props for scrollLeft and scrollTop so that the scroll offset of the header grid could be directly managed.

    Is this a use case you would be willing to support? If not, do you have any advice for what direction i should go in to implement this myself?

    Thanks for you work on this library. As someone who has used react-virtualized for a couple of years, I appreciate the simplicity of getting started with react-window and how performant it has been for me without much manual intervention.

    opened by rkeeler 52
  • AutoSizer

    AutoSizer

    opened by bvaughn 43
  • Using html table element

    Using html table element

    Do you have an example of using this with tables? I'm trying to get it working but I have a strong suspicion that it either doesn't work, or that I'm doing something very wrong. I've set the outerTagName to "table" and the innerTagName to "tbody", but I don't get any scrolling.

    Here is my code, not sure if it helps (items is a list of objects):

     <List
                outerRef={this._list}
                outerTagName="table"
                innerTagName="tbody"
                height={300}
                itemData={items}
                itemSize={() => 30}
                itemCount={items.length}
                itemKey={item => item.uniqueId}>
                {({index, style, data}) => {
                  return (
                    <tr style={style} key={index}>
                      <td>Item {index}</td>
                    </tr>
                  );
                }}
              </List>
    
    ๐Ÿ’ฌ question 
    opened by einarq 38
  • react custom scrollbar with react-window

    react custom scrollbar with react-window

    I am using react-custom-scrollbar and would like to integrate it with FixedSizeList.

    I have checked the solution on this issue on react-virtualized: https://github.com/bvaughn/react-virtualized/issues/692#issuecomment-339393521

    But the code is throwing error: Uncaught TypeError: Cannot read property 'handleScrollEvent' of undefined on scroll, in this function:

      handleScroll = ({ target }) => {
        const { scrollTop, scrollLeft } = target;
    
        const { Grid: grid } = this.List;
    
        grid.handleScrollEvent({ scrollTop, scrollLeft });
      }
    
    

    I have added ref={ instance => { this.List = instance; } } on fixedSixe<List component.

    ๐Ÿ’ฌ question 
    opened by Rahul-Sagore 37
  • Ability to pass a render function for an item

    Ability to pass a render function for an item

    react-virtualized takes a rowRenderer prop, and FlatList in react native takes a similar renderItem prop. What is the reason you chose to go with an API where you pass a component as a child instead?

    Doing so forces you to go through this memoization process if you want to pass props down to the item. I would think this is an extremely common use case, and if you accept a render function instead we can pass down any props we want as normal props, allowing the user to leverage any of React's builtin checks for sCU (PureComponent, React.memo).

    Would you be open to expanding the API a bit? Instead of passing a component as a child, we could instead provide two different props: itemComponent and renderItem, the former just passed a component (like now) and the latter passes the data into a function which returns a component.

    ๐Ÿ’ฌ discussion 
    opened by jlongster 31
  • overscanning kicks in *after* the user scrolls in either direction?

    overscanning kicks in *after* the user scrolls in either direction?

    (I'm happy to post GIF of Chrome's paint-flashing debug should you not understand the case)

    In a nutshell, I specified x overscanCount, and I was expecting to have x rows (pre)rendered top and bottom of List at all times. That way when the user suddenly changes scroll direction from up to down or vice versa, there is literally no flash of unstyled content.

    AFAIK, react-window does overscanning in one direction only and that direction is determined once the user starts scrolling in the said direction. First scroll event that is. Due to which, the "repaint" happens in the visible viewport which isn't that pretty.

    ๐Ÿ’ฌ question 
    opened by zikaari 30
  • would this be a standalone library

    would this be a standalone library

    I created a complex Table component based on Grid of react-virtualized, I'm rewriting it now, and I'm not sure that should I use this library directly or wait for it being merged into react-virtualized as v10.

    I love the simplicity of this library compare to react-virtualized, seems the original purpose of this repo is an api experimental for react-virtualized v10, I'm using some apis like onScrollbarPresenceChange from react-virtualized which are not available in this library, but I could implement them on my side if I choose to use this library. So I want to make sure what's the future of this library.

    ๐Ÿ’ฌ question 
    opened by nihgwu 21
  • Autosizer does not work with react-window

    Autosizer does not work with react-window

    I have asked this question on SO. However, I am still waiting for the solution to this problem. Please have a look.

    I want to add another question. I want my collection of images to appear like this https://m.youtube.com/watch?v=jLtr4tpFKQE&time_continue=15
    How can I wrap the images in flex like the above given link example?

    Also, Autosizer height and width does not work, I had to use window.innerHeight and window.innerWidth to make it work. When I stretch browser to different sizes, the collection of images are not responsive means they do not change position unless I scroll up and down.

    Link: https://stackoverflow.com/questions/56253318/react-virtualized-auto-sizer-does-not-work

    ๐Ÿ’ฌ question 
    opened by jazkh 19
  • Changing props of one item will update the whole list

    Changing props of one item will update the whole list

    Hey,

    I saw your memoized example and I saw that the whole List gets updated if a state of an item gets changed. See the Gif below. This is your example from https://react-window.now.sh/#/examples/list/memoized-list-items

    2019-03-18_13-43-16

    Currently I have the same problem with my list. I have an checkbox in every ListItem and if a user checks this checkbox, then every item will be unmounted and clearly new mounted. Thats a big problem, because its really slow.

    image

    Hopefully anyone can help me :)

    ๐Ÿ’ฌ question 
    opened by ffjanhoeck 17
  • Unable to start local development server

    Unable to start local development server

    I was following the instructions from https://github.com/bvaughn/react-window/blob/master/website/README.md

    However, I'm getting an error message when starting the dev server for the website:

    Error: Cannot find module 'react-dev-utils/workspaceUtils'
    
    opened by ivancuric 17
  • When I use ref. Current. ScrolltoItem (0), the screen goes blank

    When I use ref. Current. ScrolltoItem (0), the screen goes blank

    When I use ref. Current. ScrolltoItem (0), the screen goes blank

    In the above case, only my scroll bar will be white when I call this method at 0. Can I get the current scroll position

    And then I scroll and there's the content again

    ๐Ÿ‘€ needs info 
    opened by JinJieTan 16
  • glitching while using FixedSizeList, autosizer etc

    glitching while using FixedSizeList, autosizer etc

    hey, i've got a problem on Safari (both mobile and desktop) - some weird glithing of the list which is not fixing by any css rules. i've been searching for a solution for a few days and there was a case where guys forgot to use style prop. which is not my case. any thoughts? would be grateful

    <AutoSizer className="virtualize-list">
         {({ height, width }) => (
          <FixedSizeList
            height={height}
            width={width}
            itemCount={children.length}
            itemSize={childrenHeight}
            itemData={children}
          >
            {({ data, index, style }) => <div style={style}>{data[index]}</div>}
          </FixedSizeList>
        )} 
      </AutoSizer>
    
    opened by elhedgie 1
  • debounced onItemsRendered being called twice after scroll stops

    debounced onItemsRendered being called twice after scroll stops

    Hey guys, I got a VariableSizeList component with an onItemsRendered function. This function what it does is receive the scroll props as normal (startIndex, stopIndex) and debounces to dispatch an action in order to store it on redux. These props are used through redux-saga to fetch data every time we scroll through the items.

    But I noticed that every time i finish scrolling, because I added logic to determine scroll direction, it does a weird jumping, so if im scrolling down, i see the index going down and then up a bit after scrollEnd event.

    This is how the onItemsRendered function looks like:

    const onItemsRendered = useCallback(
        ({
          overscanStartIndex,
          overscanStopIndex,
        }: ListOnItemsRenderedProps) => {
          setListItemsInView({
            startIndex: overscanStartIndex,
            stopIndex: overscanStopIndex,
          });
        },
        [setListItemsInView],
      );
    

    This hook function looks like this:

    export function useSetListItemsInView({
      delay = 200,
    }: Options = {}): ReturnFunction {
      const dispatch = useDispatch();
    
      return useMemo(
        () =>
          debounce(delay, ({ startIndex, stopIndex }) => {
            dispatch(dispatchSomeAction({ startIndex, stopIndex }));
          }),
        [delay, dispatch],
      );
    }
    

    What could I be missing on this?

    When I scroll only 1 tick, the console logs show the following values:

    startIndex: 148
    stopIndex: 156
    startIndex: 145
    stopIndex: 156
    

    The value that changes is the startIndex when it triggers twice, not sure why.

    opened by msqar 0
  • Custom properties and event handlers

    Custom properties and event handlers

    The documentation shows to set custom properties and event handlers using outerElementType. Is there any reason why it can't/shouldn't be attached to the item?

    <VariableSizeGrid {...otherProps}>
        {props => <Cell {...props} onClick={handleClick} />}
    </VariableSizeGrid>
    
    opened by JoshClose 0
  • fix scrollDirection when direction is RTL

    fix scrollDirection when direction is RTL

    To determine the scrollDirection in the _onScrollHorizontal method it compares the previous state's scrollOffset with the current scrollLeft value of the target. For browsers whose "RTLOffsetType" is "negative", this results in the scrollDirection being set to "backward".

    The scrollOffset state value has been converted to a positive number or zero, and the scrollLeft value of the target (when "RTLOffsetType" is "negative") is a negative number. When comparing prevState.scrollOffset < scrollLeft it is always false because a positive value or zero is never greater than a negative value.

    Proposed fix: compare prevState.scrollOffset < scrollOffset because scrollOffset has already been transformed in the same way that prevState.scrollOffset was transformed.

    This pull request is intended to address this bug https://github.com/bvaughn/react-window/issues/689.

    opened by DevinFrenze 1
Releases(1.3.1)
Owner
Brian Vaughn
React JS core team at @facebook; formerly at @treasure-data and @google.
Brian Vaughn
React-app - Building volume rendering web app with VTK.js,react & HTML Using datasets provided in vtk examples (head for surface rendering and chest for ray casting)

SBE306 Assignment 4 (VTK) data : Directory containing Head and Ankle datasets Description A 3D medical viewer built with vtk-js Team Team Name : team-

Mustafa Megahed  2 Jul 19, 2022
An interactive CLI automation tool ๐Ÿ› ๏ธ for creating react.js and next.js projects most fast and efficiently. โš›๏ธ

An interactive CLI automation tool ??๏ธ for creating react.js and next.js projects most fast and efficiently. โš›๏ธ About โ„น๏ธ ReexJs CLI is an interactive

Alexis Guzman 27 Apr 12, 2022
A simple project showing the usage of useState, useEffect and conditional rendering in React

Getting Started with Tour-sample React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can ru

Amaechi johnkingsley 1 Jul 30, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.9k Jan 7, 2023
A collection of composable React components for building interactive data visualizations

an ecosystem of composable React components for building interactive data visualizations. Victory Contents Getting Started Victory Native API Document

Formidable 10.1k Jan 3, 2023
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

React Hook Component State This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the so

Yongwoo Jung 2 May 15, 2022
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Jan 4, 2023
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

๊ณ ์Šค๋ฝ 6 Aug 12, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 11 Dec 31, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
A node script that lists the cities on Santa's route from santatracker.google.com

Google Santa Route A script that lists the cities on Santa's route from santatracker.google.com based on the JSON containing all Santa's destinations.

Emile Calixte 1 Dec 24, 2021
:black_medium_small_square:React Move | Beautiful, data-driven animations for React

React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin

Steve Hall 6.5k Jan 1, 2023
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.4k Jan 2, 2023
Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Alan Vieyra 4 Feb 1, 2022
๐Ÿ”„ Basic project to start studying React and Typescript. With it you can translate text to binary or morse language. This project addresses the creation of routes and components.

max-conversion Projeto criado para iniciar nos estudos de React e Typescript Basic project to gain knowledge in react Na plataforma รฉ possรญvel convert

Igor Neves 3 Feb 12, 2022