search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

How can I hide the sticky group-title when using GroupedVirtuoso. #146

Closed wangxing-sunny closed 4 years ago

wangxing-sunny commented 4 years ago

In my case, I don't want the title sticky on top. I've tried to set the GroupContainer, but initialTopMostItemIndex will have some problem. Here is the case. `import React from 'react' import { GroupedVirtuoso } from 'react-virtuoso'

const groupRender = index => { return <div style={{height: 20}}>group-{index}

}

const itemRender = index => { return <div style={{height: 80}}>item-{index}

}

const groupContainer = ({ children, style, ...restProps }) => { let newStyle = { ...style }; newStyle = { ...style, position: 'relative' }; return ( <div {...restProps} style={newStyle}> {children} ); };

export default () => { // set the initialTopMostItemIndex to 999 to have the list start at the bottom return (

) }` Is there a solution to this? Thanks!

petyosi commented 4 years ago

@shawnwangzZ if you don't want the sticky headers, the best option would be to use the flat list and render headers at specific indexes. Hope this makes sense.

wangxing-sunny commented 4 years ago

Thanks! I solved this with your suggestion.

lynhan318 commented 3 months ago

I resolved this by adding visibility:'hidden' to the sticky element.