Is it possible to prepend custom elements to the list?

It would be helpful to add a search bar for example, similarly to what twitter does for messages search:

In reactWindow I used to do it this way:

1. Add a paddingTop to the list

    const Item = ({ index, style }) => {
      const item = items[index];

      return (
        <div
          style={{
            ...style,
            top: `${parseFloat(style.top) + topPadding}px`
          }}
        >
          <ItemRendrer item={item} />
        </div>
      );
    };

1. Then, using the list container renderer, I place the customElement at top of the list

const innerElementType = React.forwardRef(({ style, ...rest }, ref) => (
      <div>
        {customElement}
        <div
          ref={ref}
          style={{
            ...style,
            height: `${parseFloat(style.height) + topPadding}px`
          }}
          {...rest}
        />
      </div>
    ));

My first reaction was trying to replicate the same workaround in Virtuoso but found that the style is not passed down as a prop in ItemRendrer. Maybe there is a better/cleaner way.

Thank you by the way for the this awesome piece of software!

[petyosi]

I am considering an optional header component, in the same way as the footer. Meanwhile, you can easily do something like this (which is not very elegant, but works:): https://stackblitz.com/edit/react-y6fim2?file=example.js

Let me know what you think about it.

[petyosi]

@mdegrees - no, not a good idea.