Feature request: Bottom Items / Sticky Footer

[robwheatley]

Hi,

Just a thought as this would be useful for me and maybe others. I've done what I wanted to do with a workaround, but it would be really easy if Virtuoso supported a sticky footer (or Bottom Items) like you have Top Items.

My thought was to add an option that either makes the Footer always show, or maybe do what you have done for Top Items, but for Bottom Items.

My scenario:

I have a list of cards, a bit like Trello. I want to have an "Add Card" button always show on the screen at the bottom of the list.

That is simple enough, I can just add it under the list container. But that looks odd if you don't have very many entries in the list (the button is way down the page because my Virtuoso list stretches to the height of its parent).

So, I could add the "Add Card" button to the Footer element. Now it will always show as the last entry in the list, which is fine when you have a short list, or you are scrolled to the bottom of a long list, but if you are looking at the start of a long list, you don't get to see the Add Card button.

My solution was to put the Add Card button in the Footer and have an element under the list with one too. I then put an observer on the Footer, and if it's visible, I hide the button at the bottom of the list. When you scroll up (so the Footer is no longer visible) then the button element re-appears. Now my page works how I want it. The Add Card button always looks like it's at the bottom of the list and is always visible.

[Robokishan]

can we have simple header as sticky too ?

[ljs19923]

@Robokishan did you find a way to add a sticky header?

[Robokishan]

@Robokishan did you find a way to add a sticky header?

nope changed library

[delijah]

@petyosi At the moment i am using this to make header and footer sticky. A prop on the virtuoso component would be much nicer though. This solution makes me a bit afraid i am breaking something, or if react-virtuoso updates some internals, we are also not safe that this will still work... And we are forced to use !important, which i also dislike.

const StyledVirtuoso = styled(Virtuoso)`
    & > [data-viewport-type='element'] {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: auto !important;

        & > section {
            position: sticky;
            z-index: 1;

            &:first-of-type {
                top: 0;
            }

            &:last-of-type {
                bottom: 0;
                display: flex;
                align-items: flex-end;
                flex-grow: 1;
            }
        }
    }
`;

<StyledVirtuoso headerFooterTag="section" ... />

[petyosi]

@delijah I'm happy that you're interested in that feature. If you would like to see it in the library, you can either submit a PR, or sponsor its development - contact me if you're interested in such option.

[petyosi]

The Message List version of the component has sticky headers / footers, which can be optionally made to occupy no space.