Footer with VirtuosoGrid?

[NTag]

trafficstars

Is it possible to have a footer with VirtuosoGrid? Which wouldn't be part of the grid but below it. If I try to add a footer prop to VirtuosoGrid I have a typing error.

[petyosi]

Not supported currently, but easy to add. If you decide to contribute, I may suggest you wait for a week or so, since I am in the middle of a large refactor.

[itayganor]

@petyosi Is there a chance for this to be resolved? I'm looking for a header/footer solution to add top and bottom paddings to the scroller, just like we do in the regular List component.

I tried to contribute but the learning curve of the implementation makes this difficult since it's new behavior for grid.

Thank you!

[harrisonlo]

@petyosi I think it's quite common to have top and bottom paddings in layouts, and most of us are "hacking" that with the Header and Footer components. What do you think about just adding a simple prop for the vertical paddings? (I'm willing to do a PR, I'd appreciate if you could point me to the relevant files tho!)

[petyosi]

@harrisonlo I am hesitant of adding styling props, to be honest - all in all, they won't be easier to implement than Header/Footer.

If you want to introduce header and footer, here's the rough checklist:

• Add the items to the interface.
• Include them in the component system.
• Render them like the list does (look for Header/Footer).
• Track their size to the below observables:
• Add headerHeight / footerHeight measure observables, and include them in the totalHeight calculation (roughly here).
• Test how the whole thing works by duplicating one of the test cases in e2e.

[harrisonlo]

@petyosi Thanks for the reply. I saw that the paddingTop and paddingBottom values are updated inline as you scroll, so I thought when it reaches top or bottom (for which there seem to be logics already in place, with atTopStateChange etc.) we can simply set the value to something other than 0? That said, I haven't looked too much into the code to know if it'll break something.

[hungnguyentiki]

Hello, how about this issue? Do you have any plan to support it?

[joachimklug]

How is this feature supposed to work? Should the header / footer item be the first / last item of the grid or should it be separate and always represented in a new line? Here an example for the footer:

Option 1: The Footer Item is the last item of the grid.

Option 2: The Footer Item is always in a new row under the last grid row.

[itayganor]

Should the header / footer item be the first / last item of the grid or should it be separate and always represented in a new line?

The first option would be called lastItem rather than footer.

Although one might see the footer (and header) as a "full-width item", they are actually content padders.

[cnt-null]

@petyosi The docs show an example of endless scrolling with Virtuoso + endReached + Footer. VirtuosoGrid has endReached but no Footer. Is there another way to show "Loading..." message for endless scrolling in this case?

[erandow]

Is there any update on this ?

[github-actions[bot]]

:tada: This issue has been resolved in version 3.1.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: