bvaughn / react-virtualized Goto Github PK
View Code? Open in Web Editor NEWReact components for efficiently rendering large lists and tabular data
Home Page: http://bvaughn.github.io/react-virtualized/
License: MIT License
React components for efficiently rendering large lists and tabular data
Home Page: http://bvaughn.github.io/react-virtualized/
License: MIT License
Browser | Max-width |
---|---|
Firefox | 33554400px |
Chrome | 33554428px |
Opera | 33554428px |
IE 9 | 21474836.47px |
Add a check for sizes approaching this and print a warning.
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
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 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
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.
A cell's content is clipped by truncatedColumnText and there is no API to prevent this.
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.
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
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.
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.
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.)
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!
Steps to reproduce:
FlexTable
where the 1st column is set to grow and subsequent columns are fixed-width.Table headers become offset by the width of the scrollbar:
This can be seen by rearranging the column orders in the FlexTable
example:
componentDidMount
check to determine scrollbar size (offsetWidth - clientWidth
) and subtract from width of table row when scrollbar is visible.Grid
component (as discussed on version 5 roadmap) and use them instead.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?
Is it possible to support variable rowHeight
in VirtualScroll?
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.
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.
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?
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 reachedautoLoadItems
{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 / elementonInfiniteLoad
{() => 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 / elementgetLoadMoreItemElement
{({ 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 / elementloadMoreItemsElementHeight
{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.
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?
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!
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.
How would one go about responding to row clicks?
setting onClick
handler on FlexTable or FlexColumn has no effect.
It would be very nice to pass some callback, which triggered on size changed:
<AutoSizer
onChange={({newWidth, newHeight}) => /* do something with it */}
>
</AutoSizer>
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.
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.
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.
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?
Might be able to get better scrolling performance if 3d/2d transform were used instead of padding to control the vertical offset.
@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!
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!
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.
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...
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!
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.
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={}
/>
VirtualScroll
's vertical virtualization functions into a helper utility.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.
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.
Refactor FlexTable
and VirtualScroll
to use Grid
internally for greater code sharing.
Things to investigate:
Reference: detecting transform3d
support.
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.
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!
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.
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?
amazing work !
but is this project support react-native ?
Borrowing inspiration from zippyui/react-date-picker and JedWatson/react-select...
Split the current CSS styles into 2 categories:
position
, overflow
) should be defined as inline styles.text-transform
, color
) should go into a CSS file that must be imported manuallyimport { VirtualScroll } from 'react-virtualized'
import 'react-virtualized/theme.css'
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).
This change will enable the following:
key
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.
(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 -
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.
See this comment on issue #38 for more context.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.