Missing documentation: mixed sized items within virtual lists

[gregoryforel]

Would it be possible to add an example of mixed sized items with virtual lists? I am struggling to implement it and I believe this would help many people as most lists have mixed sized items.

[Emmanuella-Aninye]

@gregoryforel can you expand on what you mean please?

[gregoryforel]

@Emmanuella-Aninye sure! The examples of virtual lists and virtual kanban are only showing how to implement rows with the same fixed height. I wasn't able to implement a virtual list with items that each have a different height.

[Emmanuella-Aninye]

@gregoryforel is this kind of what you're speaking about? This is their example with a kanban like approach. I think the individual items are different heights
https://react-beautiful-dnd.netlify.com/iframe.html?id=board--simple

[gregoryforel]

It is, but this example does not implement virtual list. The challenge is virtual list and mixed height together.

[someguythatcodes]

@gregoryforel The suggested method for dealing with dynamic height items in react-virtualized is to use their CellMeasurer component (https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer). This component wraps each item in a list and caches the item's dimensions which are then passed to the List component which works out item positions in the list based on the cached dimensions

[paulhan221]

I could also use some help/example for using react-virtualized's CellMeasurer component!

@gregoryforel were you able to implement it?

[chaomao]

here is the demo of dynamic height per row with react-beautiful-dnd + react-virtualized + cellMeasurer, please check it out, https://codesandbox.io/s/react-beautiful-dnd-react-virtualized-cell-measurer-xue6h

However I found there is one issue, if you move one card down to a far place, like below 50 cards, the list position will jump a little bit after drag finished. I cannot figure it out... would you guys have any suggestion?

[55Cancri]

@chaomao @paulhan221 @someguythatcodes @gregoryforel
Here is chaomao's example updated to React 18, @hello-pangea/dnd (rbd fork), typescript, and hooks, but still the problem exists.

https://codesandbox.io/s/react-beautiful-dnd-react-virtualized-cell-measurer-forked-stpyxs?file=/index.tsx

1. If an item is dragged ~50 items down, it jumps and the measurements get thrown off.
2. If I try to scroll all the way to the bottom, the list gets stuck halfway.

Has anyone solved the problem of dnd in virtual lists with dynamic height in 2023?