React components for efficiently rendering large lists and tabular data

Hey, I have seen you did a great job already. I am now about to drop my own custom implementation of the measurer and port everything to the latest react-virtualized.

A few things I noticed are not good enough for my use case:

Row height caching.

Current row height caching is done using the index. However in my case, it is not possible to cache by index, I need a different caching mechanism based on custom id's.

Row element caching.

Currently you create a row element twice, once for measuring, once for representation. I can introduce a caching in the user code, so element creation happens only once, however you might want to solve this in the library.

I am using the List component (8.4.1) for a very long list (2000+) of fairly complicated elements. I have started seeing painting issues but I haven't been able to pin-point the problem exactly. If I flick the scroll wheel on my mouse to zip down the list, then flick the opposite direction - sometimes - when I get to the top of the list, the top cells don't paint. The elements are in the dom and laid out on screen, I can click on the elements and inspect them - but scrolling no longer works and my list component is blank. Resizing the browser, or changing the data in the list seems to trigger a paint and everything is good.

I have tried adding a "refresh" property to my List, and setting it to today's Date at the end of the scroll to trigger a paint... this doesn't seem to have any effect. What DOES seem to have an effect (but adversely affects scrolling performance) is to override the css property will-change to "auto".

Sorry, I don't have code that reliably re-creates the problem.

Any ideas??

I see one problem in Safari browser (9.0.3) on my Macbook. I'm trying this example https://bvaughn.github.io/react-virtualized/ with 10000 of rows. If I try to scroll quickly using touchpad, I'll see that from some time is smooth elastic scrolling gone and everything became really choppy.

It looks like there is triggered some event which prevents scrolling.

Hi, first about my use case: I am building a chat app. Which means it is essentially important to:

• be able to render a huge amount of rows
• be able to request additional rows
• be able to jump in the middle of a 1 year long conversation

This means that the list we are going to render is potentially just a fragment of a very long list, there are rows after what we have got and there are rows before.

We need to be able to scroll up and load previous rows as we go, as well as to scroll down and load next rows.

I just noticed that the VirtualScroll element has stuttery scrolling in Chrome. Here's a video: http://jlongster.com/s/chrome-stutter.mp4

I'm wrapping it in AutoSizer fwiw, but I don't see how that could be related. Don't worry much about the code (it's ClojureScript), the rows it's rendering is pretty basic: just a row of inputs with values. I don't know if anyone else has seen this (I'm using latest master of react-virtualized) and Chrome 48.

I can try to make a reduced test case later, just thought I'd post this now.

Custom layers in inner scrollable area would be useful to place some non-virtualized content. Eg.:

• links between items across lines
• "row" / "column" borders (1 row table for rendering columns and 1 column table to render row borders)

Example markup based on kendo gantt:

<!-- 'Grid__innerScrollContainer' content goes here -->
<div class="k-gantt-tables">
    <table class="k-gantt-rows" style="width: 1400px;">
        <colgroup>
            <col>
        </colgroup>
        <tbody>
            <tr class="k-alt">
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr class="k-alt">
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr class="k-alt">
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr class="k-alt">
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <table class="k-gantt-columns" style="width: 1400px; height: 770px;">
        <colgroup><col><col><col><col><col></colgroup>
        <tbody>
            <tr>
                <td>&nbsp;</td>
                <td class="k-nonwork-hour">&nbsp;</td>
                <td class="k-nonwork-hour">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="k-gantt-dependencies" style="width: 1400px;">
    <div class="k-line k-line-h" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1299px; top: 191px; width: 10px;"></div>
    <div class="k-line k-line-v" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1307px; top: 191px; height: 17px;"></div>
    <div class="k-line k-line-h" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1089px; top: 208px; width: 220px;"></div>
    <div class="k-line k-line-v" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1089px; top: 208px; height: 333px;"></div>
    <div class="k-line k-line-h" data-uid="374423c0-1b1a-45d2-b14a-fa3426815c1b" style="left: 1089px; top: 541px; width: 9px;"><span class="k-arrow-e"></span>
    </div>
</div>
<!-- {childrenToDisplay} -->

I'm using your example https://bvaughn.github.io/react-virtualized/ to create big datatable with fixed table header. Problem is when I start scrolling to the sides. You can see it on your example (tested in MacOS Chrome with magic mouse). If you scroll to the side you can see that header is updated with some delay. Is there any chance how to improve this speed. I know that it's Javascript solution that calculations take some time, but if you check different solution from Facebook http://facebook.github.io/fixed-data-table/example-object-data.html it's also achieved by Javascript and scrolling is fluid.

Thanks for your help.

When scrolling with the scroll wheel or the arrow keys in Firefox, it does very small increments, meaning I have to do at least four "scrolls" to scroll a single item (row height == 30).

I'm using the demo at https://bvaughn.github.io/react-virtualized/ , both VirtualScroll and FlexTable are affected, and I'm using Windows 7. Both Firefox 42 and Firefox Developer Edition 44 are affected.

Hi thank you for this library, it's amazing.

I want to ask what the need of this check?

I have a component which in some situations animate scrollTop property of VirtualScroll component, and even in production I got 30-50ms per frame (I have a lot of lines on the screen).

It's because check causes reflow. Just removing this line highly (4+ x times) increases performance of my component without lose of any functionality. I got stable 8ms per frame on scroll animation.

I've read your comments about autoHeight coupling, and what I want is another boolean property and I know that it's bad idea.

May be you have any ideas about how to remove this check? Or move all that checks outside control?

I have been working the past two days to replace our current grid implementation using https://github.com/developerdizzle/react-virtual-list with FlexTable provided by react-virtualized.

Here is a striped-down version:

<div style={{ flex: '1 1 auto' }} className={cn}>
    <AutoSizer>
        {({height, width}) => {
            return <FlexTable
                headerHeight={itemHeight}
                height={height}
                rowCount={data.length}
                rowGetter={({index}) => { return data[index]; }}
                rowHeight={itemHeight}
                width={width}
            >
                <FlexColumn
                    dataKey='bucketSize'
                    flexGrow={1}
                    label='bucketSize'
                    width={100}
                />
                <FlexColumn
                    dataKey='sym'
                    flexGrow={1}
                    label='sym'
                    width={100}
                />
                <FlexColumn
                    dataKey='time'
                    flexGrow={1}
                    label='time'
                    width={100}
                />
                <FlexColumn
                    dataKey='ask'
                    flexGrow={1}
                    label='ask'
                    width={100}
                />
                <FlexColumn
                    dataKey='asize'
                    flexGrow={1}
                    label='asize'
                    width={100}
                />
                <FlexColumn
                    dataKey='bid'
                    flexGrow={1}
                    label='bid'
                    width={100}
                />
                <FlexColumn
                    dataKey='bsize'
                    flexGrow={1}
                    label='bsize'
                    width={100}
                />
            </FlexTable>
        }}
    </AutoSizer>
</div>

Nothing out of ordinary.

However, when you scroll the table, there is a considerable lag/ jitter. Upon further inspection, Grid component is spending loads of time for each scroll event.

It looks like with addition of every column table scroll performance drops in half. With 22 columns, the table scroll becomes virtually unusable.

In comparison, our simple react-virtual-list implementation scales to hundreds of columns without any noticeable performance impact.

I have attached a CPU profile log.

CPU-20160615T154350.zip

What is MultiGrid?

1. It's an attempt to stitch together the scroll position of multiple Grid components in such a way as to reduce the amount of lag between Grids when scrolling.
2. It's also an attempt reduce the amount of code/complexity required to setup a fixed header/column UI.

Still wondering what the heck am I talking about? ~~Check out the demo here.~~ Edit: The online demo has been overridden by a recent release. It will become available again at some point but in the meanwhile you will have to checkout the branch and run it locally.

How can I test it?

To test this build, install react-virtualized next:

npm install [email protected]

Known Issues

The following are the only known issues for this PR. (If you have ideas about how to address them- please chip in! I need your help!)

• [ ] When scrollbars are visible, the horizontal scrollbar for bottom-right Grid is hidden unless you scroll to the very bottom. If I'm not able to find a workaround for this feature I could rewrite MultiGrid to use ScrollSync internally. This would still provide a simpler API to users wanting basic fixed columns/rows. However it would lose some of the super-smooth vertical scrolling currently offered by the component.

this is package.json from v9.22.3 ,installed by npm. npm registry is: https://registry.npmjs.org/

  "peerDependencies": {
    "react": "^15.3.0 || ^16.0.0-alpha",
    "react-dom": "^15.3.0 || ^16.0.0-alpha"
  },

package.json

{
  "name": "react-virtualized",
  "description": "React components for efficiently rendering large, scrollable lists and tabular data",
  "author": "Brian Vaughn <[email protected]>",
  "user": "bvaughn",
  "version": "9.22.3",
  "homepage": "https://github.com/bvaughn/react-virtualized",
  "main": "dist/commonjs/index.js",
  "module": "dist/es/index.js",
  "jsnext:main": "dist/es/index.js",
  "license": "MIT",
  "scripts": {
    "build:types": "flow-copy-source --ignore \"**/*.{jest,e2e,ssr,example}.js\" source/WindowScroller dist/es/WindowScroller && flow-copy-source --ignore \"**/*.{jest,e2e,ssr,example}.js\" source/AutoSizer dist/es/AutoSizer",
    "build": "yarn run build:commonjs && yarn run build:css && yarn run build:es && yarn run build:demo && yarn run build:umd",
    "build:commonjs": "yarn run clean:commonjs && cross-env NODE_ENV=commonjs babel source --out-dir dist/commonjs",
    "build:css": "postcss source/styles.css -o styles.css --use autoprefixer",
    "build:demo": "yarn run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail",
    "build:es": "yarn run clean:es && yarn run build:types && cross-env NODE_ENV=es babel source --out-dir dist/es",
    "build:umd": "yarn run clean:umd && cross-env NODE_ENV=rollup rollup -c",
    "clean": "yarn run clean:commonjs && yarn run clean:demo && yarn run clean:es && yarn run clean:umd",
    "clean:commonjs": "rimraf dist/commonjs",
    "clean:demo": "rimraf build",
    "clean:es": "rimraf dist/es",
    "clean:umd": "rimraf dist/umd",
    "deploy": "gh-pages -d build",
    "lint": "eslint 'source/**/*.js'",
    "typecheck": "flow check",
    "prettier": "prettier --write '{playground,source,docs}/**/*.{js,md}'",
    "prettier:diff": "prettier --list-different '{playground,source,docs}/**/*.{js,md}'",
    "postpublish": "yarn run deploy",
    "prepublishOnly": "yarn run build",
    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --config webpack.config.dev.js",
    "test": "yarn run test:jest",
    "test:jest": "jest --no-watchman --runInBand",
    "test:coverage": "jest --no-watchman --maxWorkers 2 --coverage && codecov",
    "watch": "watch 'clear && yarn run test -s' source",
    "watch:jest": "jest --no-watchman --watch"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "files": [
    "dist",
    "styles.css"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/bvaughn/react-virtualized.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "react-component",
    "virtual",
    "list",
    "scrolling",
    "infinite",
    "virtualized",
    "table",
    "fixed",
    "header",
    "flex",
    "flexbox",
    "grid",
    "spreadsheet"
  ],
  "bugs": {
    "url": "https://github.com/bvaughn/react-virtualized/issues"
  },
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.2",
    "@babel/plugin-external-helpers": "^7.2.0",
    "@babel/plugin-proposal-class-properties": "^7.7.0",
    "@babel/plugin-transform-modules-commonjs": "^7.7.0",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.7.0",
    "@babel/preset-stage-2": "^7.0.0",
    "autoprefixer": "^9.7.1",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.0.6",
    "babel-plugin-flow-react-proptypes": "^26.0.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "codecov": "^3.6.1",
    "codemirror": "^5.49.2",
    "cross-env": "^6.0.3",
    "css-loader": "^3.2.0",
    "eslint": "^6.6.0",
    "eslint-config-fbjs": "^3.1.1",
    "eslint-config-prettier": "^6.5.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-flowtype": "^4.3.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-relay": "^1.3.12",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^4.2.0",
    "flow-bin": "^0.111.3",
    "flow-copy-source": "^2.0.8",
    "gh-pages": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^3.0.9",
    "immutable": "^4.0.0-rc.12",
    "jest": "^24.9.0",
    "jest-environment-puppeteer": "^4.3.0",
    "lint-staged": "^9.4.2",
    "postcss": "^7.0.21",
    "postcss-cli": "^6.1.3",
    "postcss-loader": "^3.0.0",
    "prettier": "1.19.1",
    "pretty-quick": "^2.0.1",
    "puppeteer": "^2.0.0",
    "react": "^16.11.0",
    "react-codemirror": "^1.0.0",
    "react-dom": "^16.11.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-test-renderer": "^16.11.0",
    "rimraf": "^3.0.0",
    "rollup": "^1.26.5",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-uglify": "^6.0.3",
    "style-loader": "^1.0.0",
    "watch": "^1.0.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.7.2",
    "clsx": "^1.0.4",
    "dom-helpers": "^5.1.3",
    "loose-envify": "^1.4.0",
    "prop-types": "^15.7.2",
    "react-lifecycles-compat": "^3.0.4"
  },
  "peerDependencies": {
    "react": "^15.3.0 || ^16.0.0-alpha",
    "react-dom": "^15.3.0 || ^16.0.0-alpha"
  },
  "browserify": {
    "transform": [
      "loose-envify"
    ]
  }
}

Feature Request

I suggest adding some deprecation warning, as well as a link to your newer, react-window lib, that is currently linked up in MUI documentation in the place where react-virtualized once was recommended (which is the way I actually got to know about this library at all in the first place)

Thanks for contributing to react-virtualized!

Before submitting a pull request, please complete the following checklist:

• [ ] The existing test suites (npm test) all pass
• [ ] For any new features or bug fixes, both positive and negative test cases have been added
• [ ] For any new features, documentation has been added
• [ ] For any documentation changes, the text has been proofread and is clear to both experienced users and beginners.
• [ ] Format your code with prettier (yarn run prettier).
• [ ] Run the Flow typechecks (yarn run typecheck).

Here is a short checklist of additional things to keep in mind before submitting:

• Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :)
• Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.)

i would like to know the concept of how "react-virtualized" was developed.

recently, i have been interested in the react performance optimization. in particular, i have focused on List virtualization.

i wondered how this library works and saw the source code. but I don't have enough skills, so... I don't understand it as a whole. 😥

I read and studied this.

i want to create a nice library like "react-virtualized". can you explain how it was made? 😀

react-virtualized : 9.22.3 Version :

• Andorid : 9, 10
• Chrome Version 74.0

An error corresponding to the sentry occurred, I am using windowScroller for that part.

Can you tell me why this error is occurring?