Closed oylp1988 closed 3 weeks ago
Hi @oylp1988 , were you able to find a solution to this problem? I may be looking at this same thing soon 😄
This is what I do with react-window
:
const innerElementType = useMemo(
() => (props: any) =>
(
<Collapse
{...props}
bordered={false}
accordion
expandIconPosition="end"
className={styles.collapseList}
onChange={onCollapseChange}
/>
),
[onCollapseChange]
);
<VariableSizeList
height={500}
itemCount={items.length}
// need to pass the custom key here, otherwise the index will be the key
itemKey={(index) => items[index].id}
itemSize={() => 200}
width="100%"
innerElementType={innerElementType}>
{({ index, style, data, isScrolling, ...rest }) => {
const item = items[index];
return (
<div style={style}>
// This is a wrapper for Collapse.Panel
<ItemCard {...rest} key={data.id} item={item} header='Info'>
<InfoList info={item.info} />
</ItemCard>
</div>
);
}}
</VariableSizeList>
Hope it helps
Thanks for this great lib, I have an user case of building a virtulized collapse list.
As you as know, the child of a collapse component is an array of some collapse panel. However, the FixedSizeList will return you a container, which will cause the collapse unable to be rendered.
Could anyone share the thoughts?