This change will enable the following:

• Better support for pure function components; (these do not currently work with the inline style positioning.)
• Relax the requirement of rendered rows specifying their own key
• Support node types (eg. plain strings, numbers) in addition to elements

Here is the offending line:
https://github.com/bvaughn/react-virtualized/blob/master/source/FlexTable/FlexTable.js#L209

This causes cells that contain non-strings to have a title of [object] which is not helpful. We should probably just rely on the cell renderer to set its own title.

Is it possible to prepend new rows of data in the FlexTable? I would like to attach a real-time data stream so that I can add new rows to the top

How would one go about responding to row clicks?

setting onClick handler on FlexTable or FlexColumn has no effect.

It'd be super useful to be able to set a callback to be called whenever the virtual scroll container has been scrolled. As far as I know, it should be passed in through props. Is there already an existing way to do this that I'm not aware of?

Steps to reproduce:

1. Create a FlexTable where the 1st column is set to grow and subsequent columns are fixed-width.
2. Set OS scrollbars to be always-on: System Preferences > General:

Table headers become offset by the width of the scrollbar:

This can be seen by rearranging the column orders in the FlexTable example:

Possible solutions:

• Add componentDidMount check to determine scrollbar size (offsetWidth - clientWidth) and subtract from width of table row when scrollbar is visible.
• Implement fixed-headers in Grid component (as discussed on version 5 roadmap) and use them instead.

This can be seen on the demo page. :(

I'm not clear of how to fix this. I could use a relatively positioned placeholder (with a height of 0) and a nested, absolutely positioned div that grows to fill the height- but this might cause problems with flex layouts.

For inspiration check out...

• https://github.com/nkbt/react-height/blob/master/src/ReactHeight.js
• https://github.com/nkbt/react-collapse/blob/master/src/Collapse.js

Hi @bvaughn! I ran into this error while trying out AutoSizer component for the first time. I was trying this originally with SSR on but even with no SSR, I still see the same issue.

I am probably making a n00b mistake but any pointers would be much appreciated!

Package version: "react-virtualized": "^2.6.1"

[piping] can't execute file: /Users/anuj/Github/shuffle-web/bin/server.js
[1] [piping] error given was: ReferenceError: document is not defined
[1]     at Object.exports.__esModule (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:280:20)
[1]     at __webpack_require__ (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:30:30)
[1]     at Object.module.exports (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:158:35)
[1]     at __webpack_require__ (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:30:30)
[1]     at Object.defineProperty.value (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:120:20)
[1]     at __webpack_require__ (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:30:30)
[1]     at Object.defineProperty.value (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:63:19)
[1]     at __webpack_require__ (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:30:30)
[1]     at Object.defineProperty.value (/Users/oyeanuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:50:18)
[1]     at /Users/anuj/Github/helloworld/node_modules/react-virtualized/dist/react-virtualized.js:53:10

(moving issues from #25 )

Today, the VirtualScroll component requires a rowHeight and a height for itself. This feature request is to for the plugin to not require -

1. The component height but instead calculate based on the just the heights of the element itself.
2. The rowHeight and instead base that on the content of the height

This would make the plugin immensely flexible and allow it to tackle cases where those heights either might be unknown or can change (expand/collapse based on user actions) or where the container height can be flexible.

My immediate use-case where this would be useful is for lazy-loading feeds (think Facebook, Twitter, etc).

If anyone has any other examples, use-cases or suggestions around this feature, please add them here.

@bvaughn This library looks really interesting. I was wondering if it can be adapted (or functionality be added) to make it work for the use-case of lazy loading a list of items but without a fixed container height?

My use-case is similar to a feed like Facebook, or Twitter, where I have a list of items to show in the viewport, would like to not render things which are not in the visible area (lets say, defined as the viewport + x) and some support for pagination?

I know that might not be where you see this library headed but wondering if any of the above will be solved by the library.

Thanks again for this!

Facebook's fixed-data-table supports a rowHeightGetter function for dynamic row heights. This may be trickier to support in react-virtualized because of the scrollToIndex property but it warrants an investigation.

Line https://github.com/bvaughn/react-virtualized/blob/master/webpack.config.dist.js#L14 in webpack makes it so that if you include this as a <script> tag on a page, it sets it to window["react-virtualized"] which is strange. I would expect it to be window.ReactVirtualized, so that it exposes a ReactVirtualized global without forcing a referencing through the window object.

Things to investigate:

• Does it cause too much GPU strain?
• Does it introduce any rendering artifacts for Safari (or other browsers)
• Should it be opt-in or on by default?

Reference: detecting transform3d support.

Original Description

Refer to this comment by James:

I think I found one potential problem: each row is placed by setting the top CSS property, which apparently makes Chrome redraw the whole viewport. I changed it to transform: translateY(...) and it seems a bit smoother.

Quick test does seem smoother but it could be confirmation bias. Need to test more and confirm that (1) performance really does improve and (2) not at an unacceptable GPU cost.

Will leave this issue open for now and see if more people have opinion or information.

The scenario is basically: You have X number of items and when you reach the end of the list you either: (a) show a "Load more items" button / row / element when they reach the end of the list, and show a spinner when it's pressed, or (b) you automatically show a spinner when they reach the end of the list. Once new items show up, you continue scrolling.

I'm not sure of what the ideal API would be, but thinking about the states that need to be tracked, (disregarding the property names) I think the most flexible lower level API would need to provide something like:

• hasMoreItems {boolean} flag to decide if it should do anything when the end of the list is reached
• autoLoadItems {boolean} (ignored if hasMoreItems is false) flag to decide what to do when the end of the list is reached: (true) automatically trigger an action, or (false) render a "Load more items" button / row / element
• onInfiniteLoad {() => void} (ignored if hasMoreItems is false) Called when you click on "Load more items" with false autoLoadMoreItems, or if you reach the end of the list with true autoLoadMoreItems
• isInfiniteLoading {boolean} (ignored if hasMoreItems is false) flag to decide if it should show a spinner or the "Load more items" button / row / element
• getLoadMoreItemElement {({ isInfiniteLoading: boolean, onInfiniteLoad: function }) => ?ReactElement} (ignored if hasMoreItems is false, return value ignored when autoLoadItems is true) get the element to render when loading (e.g. spinner) or when showing "Load more items" button / row / element
• loadMoreItemsElementHeight {number} (ignored if hasMoreItems is false) height for the return value of getLoadMoreItemElement

Thoughts?

It could probably be taken further by supporting bi-directional infinite scrolling (e.g. you get dropped in the middle of a list and you can follow the cursors up or down the list), which means you could throw away items after a certain count in order to limit memory usage. Although, I don't know how useful or practical that would be.

Apologies in advance, I'm still new with all this...

I installed via: "npm install react-virtualized --save"

but when I run gulp, I get this error:

Error: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1!./../../node_modules/cssnext-loader/index.js!./AutoSizer.css' from '/Users/vgoklani/metricle/apps/web_app/static/scripts/viewer/node_modules/react-virtualized/dist'
at /Users/vgoklani/metricle/apps/web_app/node_modules/resolve/lib/async.js:46:17
at process (/Users/vgoklani/metricle/apps/web_app/node_modules/resolve/lib/async.js:173:43)
at ondir (/Users/vgoklani/metricle/apps/web_app/node_modules/resolve/lib/async.js:188:17)
at load (/Users/vgoklani/metricle/apps/web_app/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/vgoklani/metricle/apps/web_app/node_modules/resolve/lib/async.js:92:31)
at /Users/vgoklani/metricle/apps/web_app/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)

I have several other react libraries running, and they all work fine. I'm not sure why I get error.

Is it possible to support variable rowHeight in VirtualScroll?

This callback would be similar to VirtualScroll#onRowsRendered or Grid#onSectionRendered but would be invoked any time scrollLeft or scrollTop changed within the inner, scrollable container.

This property would let lists/grids/tables be positioned side by side and scroll-synced to achieve an effect similar to a spreadsheet. It could also be used to add fixed header or column labels to a scrollable Grid.

Note 1: In order to support synchronized scrolling I would need to support a more fine-grained API that allowed specifying a scroll position and not just an row/column index.

Note 2: It would be nice to create a HOC that was configurable to auto-sync scrollLeft and/or scrollTop between all children. For this to work, components would need to implement a consistent interface or the HOC would need to know how to differentiate between VirtualScroll/FlexTable and Grid. (Probably the latter.)

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.

amazing work !
but is this project support react-native ?

Could VirtualScroll be used to display a database collection that is constantly being updated by multiple users? It would mean that there are no fixed row index positions, because records can be inserted/deleted/updated at any time at random positions in the collection.
Also data that is on some user's screen could be mutated asynchronously by an other user.
Is there a way to make VirtualScroll refresh or invalidate the internal state of displayed rows to sync it to the changing environment?
Any ideas on this?

It would be very nice to pass some callback, which triggered on size changed:

<AutoSizer
  onChange={({newWidth, newHeight}) => /* do something with it */}
>
</AutoSizer>

Can you please tag releases I didn't realise there was a new release that fixed an issue I was having with the scrollbar width header offset check. That's the first place I look to see the basic changelog. npm version [patch|minor|major] -m "dfsdf" makes it easy.

Currently the scroller is visible on the container div and the scrolling logc works for the particular div, is it possible to emulate the logic on window.onscroll.

Borrowing inspiration from zippyui/react-date-picker and JedWatson/react-select...

Split the current CSS styles into 2 categories:

• Structural styles (eg. position, overflow) should be defined as inline styles.
• Presentation styles (eg. text-transform, color) should go into a CSS file that must be imported manually

react-virtualized with default styles

import { VirtualScroll } from 'react-virtualized'
import 'react-virtualized/theme.css'

react-virtualized with custom styles

import { VirtualScroll } from 'react-virtualized'
import './react-virtualized-custom-theme.css'

This allows users more flexibility to when overriding styles. It also simplifies things WRT universal/isomorphic apps since styles won't be automatically loaded by react-virtualized components (see issue #41 for more context).

Hi, thanks for this great library. In the examples it would be really useful to see how it performs when there are many more than 1000 rows, e.g. 1,000,000.

Hi there!

First of all, great project!

Are there any plans to be able to append rows on the fly? I'll give you a use case.

We have a page where we view a table of events. When the web socket client receives a new event, we'd like to add it to the collection. If the user has rendered all the rows (i.e. they can see the last event) then any new events are appended and appear in view. If the user is not at the end of the collection, then the event is appended to the collection but it won't appear in the view.

I think this would be a great feature to have :) If there are no plans on adding this as a feature, then I could start working on it.

It would also be nice, for example, to add a new row after a given index. A use case could be: You click on a row, write a comment and then the comment is added as a new row underneath the clicked row.

Thanks!

When I use to prepend some old data to the list
list.unshift('old msg')
the current position is change. How to keep it at old position?

I'm using VirtualScroll on mobile and it's awesome! However, because the renderer often can't keep up with my scrolling, I can see elements pop in as I scroll (as opposed to desktop, where the illusion is perfect). Popping isn't the worst thing, but it would be nice to provide a top and bottom "margin" where elements not visible but close to the visible viewport are still rendered to reduce the popping. At a high level, this would provide a balance parameter between the benefits of virtual scroll (hiding what's not visible for speed) and normal scroll (less popping but slower).

I do have a hacky version of this here (https://github.com/pennyapp/react-virtualized/commit/b019a145304b30f74401c9ccebb5bdfb49942e01) that I'm experimenting with for our project, but I doubt I'll take the time to reify it into something better unless there's strong demand.

See the following: babel is injecting helpers into each file and bloating my code!

You'll also need to pull in babel-runtime as a dependency.

I noticed on the example page, the flexTable "index" column is no longer populated. Bisect shows:

f07effd is the first bad commit
commit f07effd
Author: Brian Vaughn [email protected]
Date: Sun Jan 10 15:00:49 2016 -0800

Added InfiniteLoader example and refactored demo app/components to share mock data

I won't have a chance to look at it closely for a bit but thought i'd put up a flag.

When using VirtualScroll in an iOS app, the scrolling is not inertial. I think this can be fixed by adding -webkit-overflow-scrolling: touch to the VirtualScroll div, but I thought I'd flag it here so you could investigate it on mobile yourself.

Hey! I see you've got a Grid issue #22 listed.... Would that include pagination? While it may sound initially simple, and something people may want to roll their own for, the idea of having a locked header/footer potentially (and the page navigation gui) may be nice to include in the component by default. Thanks!

Is it not available? Im doing workaround by using tag inside the row to get the index row position, is this the intended thing?

thanks

See this comment on issue #38 for more context.

I'm posting this here as suggested on https://github.com/treasure-data/redux-search/issues/25.

Scrolling is not working properly. Instead of scrolling the list, it scrolls a single row. (At least on https://treasure-data.github.io/redux-search/). If you notice, the row will slightly scroll up and down just a little bit. However, if you manage to drag the scroll bar on the side, you can scroll through the list with no problem.

I'm currently trying it using the trackpad on a Macbook Air with OSX 10.11.1 and using Firefox 42.0.

When passed down and then spread with {...props} the list-prop gets rendered into the markup (to the <ContentBox>-div) as it's an valid HTML attribute for <input>-element

https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes

Identifies a list of pre-defined options to suggest to the user. The value must be the id of a element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

It doesn't happen to InfiniteLoader example due to this line I think.

Unless I am missing something and it's wanted behavior.

Each of the rows i'm putting in the VirtualScroll contain a selectable dropdown where the user can select options with his keyboard.
However, pressing the down button, starts to scroll the VirtualScroll List.

Would disabling this scroll fix the issue for me?

Hey - just curious, is there a search function built in? If I have 5,000 rows, and I want to find all rows that contain the keyword "quack", is there a fast filter?

Thanks!

Refactor FlexTable and VirtualScroll to use Grid internally for greater code sharing.

Server-side rendering logs the following warning:

Either the global navigator was undefined or an invalid userAgent was provided. Using a valid userAgent? Please let us know and create an issue at https://github.com/rofrischmann/inline-style-prefixer/issues

This is because we're prefixing the initial styles in the constructor rather at which point we may be in a server-side rendering context. We should probably move this prefixing operation to componentDidMount to ensure that we're in a browser context.

This will require a re-render but that's probably acceptable.

Hi, I wondered if in onwheel (desktop) the scrolling can be smooth scrolling? Especially in windows it will be cooler

Or can we manually override that specific behaviour

Thanks and great component!

A cell's content is clipped by truncatedColumnText and there is no API to prevent this.

Current behavior:

Expected behavior:

We have a need for a pivot table which can be arbitrarily large (millions of rows/columns). Instead of specifying a giant array of columns, we want to be able to define how many columns there are and what their size is and then provide a cellsAt(x, y, length, height) callback that returns a 2-d array of the resultant values to display. Looking at the code, it has been designed to only virtualize rows. Do you have any plans (or would you be interested in consulting?) to add column virtualization support?

Resources:

• https://github.com/css-modules/css-modules
• http://cssnext.io/

It's not clear that this would have a net positive performance impact but it seems worth profiling.

For example the Mozilla docs say (emphasis added):

Give it sufficient time to work. This property is intended as a method for authors to let the user-agent know about properties that are likely to change ahead of time. Then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens. So it is important to give the the browser some time to actually do the optimizations. Find some way to predict at least slightly ahead of time that something will change, and set will-change then.

Similarly dev.Opera says (emphasis added):

The optimizations that the browser makes for changes that are about to occur are usually costly and, as we mentioned earlier, can take up much of the machine’s resources. The usual browser behavior for optimizations that it makes is to remove these optimizations and revert back to normal behavior as soon as it can. However, will-change overrides this behavior maintaining the optimizations for much longer than the browser would otherwise do.
As such, you should always remember to remove will-change after the element is done changing, so the browser can recover whatever resources the optimizations are claiming.

Given the nature of react-virtualized we can't really comply with either of the above suggestions and so it may be better to let the browser's default behavior handle things.

Might be able to get better scrolling performance if 3d/2d transform were used instead of padding to control the vertical offset.

Create a new Grid component that supports virtualization of both rows (vertical) and columns (horizontal). Interface may look something like:

<Grid
  columnsCount={}
  columnWidth={index => {}}
  rowsCount={}
  rowHeight={index => {}}
  renderCell={({ columnIndex, rowIndex }) => {}}
  scrollToColumn={}
  scrollToRow={}
/>

Blockers

• Refactor VirtualScroll's vertical virtualization functions into a helper utility.

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.

Hello, i have issue with chat view. I want to get the lastest message when i scroll up but how i can do it. Do you have any configurations for it? Thank you!

Reference: http://stackoverflow.com/questions/16637530/whats-the-maximum-pixel-value-of-css-width-and-height-properties

Add a check for sizes approaching this and print a warning.