React-virtualized: Adding new rows on the fly (appending, prepending and insertion at a given index)

[jamhall]

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!

[bvaughn]

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.

[bvaughn]

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. :)

[jamhall]

Excellent, I'll give it a go! Thank you for your prompt response!

[noeljackson]

Is this possible but while also keeping the scroll position fixed (does not jump down if rows are prepended)?

[nikoferro]

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?

[matthiasp42]

@nikoferro Did you figure it out?

[nikoferro]

@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

[airimia1995]

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!

[wasiadabyar]

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!