Comments (9)
Is this possible but while also keeping the scroll position fixed (does not jump down if rows are prepended)?
from react-virtualized.
@matthiasp42 yes! found the following workaround for our use case:
it basically comes down to not changing the amount of rows, so what i did was to re work that part and save to an array all the questions/rows (even as null the ones that werent supposed to be shown), so now each row index would be the same even if on a new render a subquestions changes from null to an actual component.
stressing the word workaround here because in our use case we can allow that since we have all the info from the very first moment, but
from react-virtualized.
Hi @jamhall,
Thank you. :)
Unless I'm misunderstanding you, what you're referring to is already possible.
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.
This is already possible. Just update the rowsCount
property passed to either VirtualScroll
or FlexTable
to reflect the updated number of rows and it will just work.
If you're interested in reverse scrolling (adding new entries to the top of the list instead of the bottom) see issue #33.
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.
Where rows appear is totally controlled by your rowRenderer
function (and the collection/list/array that it pulls from). So you could add a new object into your array for example, give VirtualScroll
or FlexTable
the new rowsCount
(+1 of what was there) and it will just work.
from react-virtualized.
Since I think what you're asking for is already supported I'm going to close this issue but please re-open it or reach out to me in Discord if you have any troubles. :)
from react-virtualized.
Excellent, I'll give it a go! Thank you for your prompt response!
from react-virtualized.
hey there, sorry to bump this really old question, but i am actually having the same exact issue as @noeljackson
my use case is the following:
we use react-virtualized to render a huge amount of components (as rows), we use these to display surveys, where each question is a component that you can interact/leave notes/etc, so react virtualized really helps on being able to display surveys of around 200/300 questions.
a 'yes' on a question can trigger a subquestion (in this case a new row) to appear, and in this case we make a this.cache.clearAll();
of the cell measurer cache but even if we try to track scroll position and assign the value to scrollTop, its jumps, leaving the active row somethings out of sight
is there any way to achieve adding rows while keeping the scroll position fixed?
from react-virtualized.
@nikoferro Did you figure it out?
from react-virtualized.
Hi there,
I have the same issue with "Adding new rows on the fly". VirtualScroll or FlexTable aren't available on the latest version. What is the equivalent for them?
Thanks!
from react-virtualized.
Since I think what you're asking for is already supported I'm going to close this issue but please re-open it or reach out to me in Discord if you have any troubles. :)
i want to add one custome element after a spesific row any idea pleass!
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.