Header component is buggy

[ivan-kleshnin]

Header component is buggy

Demo

https://my-virtuoso.vercel.app/ ^ as you can see footer behaves as described in docs – appears at the end of the scroll. Header, on the other side, jiggles on scroll until finally disappears. Both have exactly the same markup 🤷‍♂️

Sources

https://my-virtuoso.vercel.app/_src

Basically this (create-next-app, index.js):

import * as React from "react"
import {Virtuoso} from "react-virtuoso"

export default function App() {
  return <Virtuoso
    HeaderContainer={HeaderContainer}
    FooterContainer={FooterContainer}
    ListContainer={ListContainer}
    ItemContainer={ItemContainer}
    style={{width: "auto", height: "400px"}}
    totalCount={200}
    header={() => <>
      <span>ID</span><span>Username</span><span>Title</span>
    </>}
    footer={() => <>
      <span>ID</span><span>Username</span><span>Title</span>
    </>}
    item={index => <>
      <span>Row</span><span>{index}</span><span>{index}</span>
    </>}
  />
}

let HeaderContainer = ({headerRef, children}) => {
  return <div
    ref={headerRef}
    style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", margin: 0}}
  >
    {children}
  </div>
}

let FooterContainer = ({footerRef, children}) => {
  return <div
    ref={footerRef}
    style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", margin: 0}}
  >
    {children}
  </div>
}

let ListContainer = ({listRef, children, className, style}) => {
  return <div
    ref={listRef}
    className={className}
    style={{...style, marginBottom: 0}}
  >
    {children}
  </div>
}

let ItemContainer = ({children, ...rest}) => {
  return <div
    {...rest}
    style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", margin: 0}}
  >
    {children}
  </div>
}

[petyosi]

Thanks for the report, I am working on that area.

[petyosi]

@ivan-kleshnin Does this example work for you?

I am changing the way headers and footers are defined in the next version because poking the header and footer elements is something that I would like to avoid. If you absolutely need to set display: grid to the header/footer elements, you can reach those through CSS selectors.

[ivan-kleshnin]

Yes, LGTM. I'm actually glad you're removing HeaderContainer and FooterContainer. Less convoluted APIs = 👍 . Thank you!

[petyosi]

@ivan-kleshnin thanks. I am working on a final v0.21 in the upcoming weeks.