-
Notifications
You must be signed in to change notification settings - Fork 70
Open
Description
I am trying to use this component around a table which is customised by me. I am trying just basic code, which is provided in demo.
const List3 = () => {
const container = useRef('container')
const makeItem = (i) => ({
id: i,
title: `Media heading #${i + 1}`,
text:
'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.',
})
const data = []
for (let i = 0; i < 100; i++) {
data[i] = makeItem(i)
}
const MyList = ({ virtual, itemHeight }) => (
<>
{virtual.items.map((item, i) => (
<li key={`item_${item.id}`} style={{ height: itemHeight }}>
Lorem ipsum dolor sit amet === {item.id}
</li>
))}
</>
)
const options = {
container: container, // use this scrollable element as a container
// initialState: {
// firstItemIndex: 0, // show first ten items
// lastItemIndex: data.length, // during initial render
// },
}
const MyVirtualList = VirtualList(options)(MyList)
return (
<ul ref={container} style={true ? { overflow: 'scroll', height: 100 } : {}}>
<MyVirtualList items={data} itemHeight={50} />
</ul>
)
}
export default List2
which is giving me the below error.

Can someone help me that whether this component will work around my custom table component(as it is a bit complex). If not which one can work.. Also why this basic one is not working I am sure.
It has been a long that I have spent my time in adding virtual scroll around my compnent.
Thanks in advance.
Metadata
Metadata
Assignees
Labels
No labels