Comments (3)
Sure. You can do this by just adding your items to the front of your list (unshift
) instead of the end (push
). Here's a demo and here's the gist of the source code:
export default class Example extends Component {
constructor (props) {
super(props)
this.state = {
list: []
}
}
componentDidMount () {
this._interval = setInterval(::this._updateFeed, 500)
}
componentWillUnmount () {
clearInterval(this._interval)
}
render () {
const { list } = this.state
return (
<div className={styles.VirtualScrollExample}>
<VirtualScroll
ref='VirtualScroll'
className={styles.VirtualScroll}
width={300}
height={200}
rowHeight={60}
rowsCount={list.length}
rowRenderer={::this._rowRenderer}
/>
</div>
)
}
_updateFeed () {
const list = [ ...this.state.list ]
list.unshift(
// Add new item here
)
this.setState({ list })
// If you want to scroll to the top you can do it like this
this.refs.VirtualScroll.scrollToRow(0)
}
_rowRenderer (index) {
return (
// Your markup goes here
)
}
}
from react-virtualized.
Thanks Brian! Second question, is there a way to buffer the updates, such that if the user is scrolling while the data stream is coming in, the scroller doesn't change position? There should only be updates when the scroller is at the top position. Presumably one has to intercept the current scroll position and use shouldComponentUpdate()?
from react-virtualized.
No problem!
I think the way I would initially approach this would be to combine the scrollToRow
method and the onRowsRendered
callback like this:
export default class Example extends Component {
constructor (props) {
super(props)
this.state = {
list: []
}
}
componentDidMount () {
this._interval = setInterval(::this._updateFeed, 500)
}
componentWillUnmount () {
clearInterval(this._interval)
}
render () {
const { list } = this.state
return (
<div className={styles.VirtualScrollExample}>
<VirtualScroll
ref='VirtualScroll'
className={styles.VirtualScroll}
width={300}
height={200}
onRowsRendered={::this._onRowsRendered}
rowHeight={60}
rowsCount={list.length}
rowRenderer={::this._rowRenderer}
/>
</div>
)
}
_onRowsRendered ({ startIndex, stopIndex }) {
this._startIndex = startIndex
}
_updateFeed () {
const list = [ ...this.state.list ]
list.unshift(
// Add new item here
)
this.setState({ list })
this.refs.VirtualScroll.scrollToRow(this._startIndex)
}
_rowRenderer (index) {
return (
// Your markup goes here
)
}
}
The vertical position of row X will be different for lists of different sizes, but this approach would instruct the list to update its offset to keep row X visible. The one downside of this approach is that it may cause a bit of a snap-to effect when new rows are added. I haven't tried it so I'm not entirely sure.
from react-virtualized.
Related Issues (20)
- Version 9.22.5 is a ghost not visible in this repository?
- Height Issue after rendering
- Virtualisation fail ? Why invisible content is added to my list ?
- react18.2.0 HOT 1
- Tips for displaying a dropdown to overflow the React Virtualized container without being hidden?
- Failed to fetch dynamically
- The styles.css isn't part of the 9.23.0 version
- How to load JSON-formatted data virtually?
- TypeError : RegisterChild in WindowScroller
- Props ScrollElement of WindowScroller load every items if parent is InfiniteLoader HOT 2
- Autosizer component does not accept any refs or spread props.
- Change scrolling approach for Table component HOT 1
- Table's data columns are not resized until scrolling the content [regression]
- `scrollToRow()` on `List` with `WindowScroller` not working HOT 3
- How to use search functionality similar to ctrl+f using react-virtualized HOT 1
- Rows with dynamic height overlap when using CellMeasurer HOT 1
- React Virtualized List - Scroll jumps to top when data updated HOT 3
- Grid/MultiGrid: TypeError: Super expression must either be null or a function HOT 1
- `WindowScroller` increases `scrollTop` value when a list row gets expanded
- HOC(Multigrid) from react-virtualized strange update method
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-virtualized.