React-beautiful-dnd: 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?