react-virtualized exposes the relevant components List, CellMeasurer and CellMeasurerCache. These can be used together reliably to create a virtualised list with dynamically calculated row heights as long as no form components are used. I am having great difficulty getting the API to respond to multiline form inputs, the heights calculated correspond to to the size of each component had the multiline inputs not expanded to accommodate the text passed in from state.
const cache = new CellMeasurerCache({
fixedWidth: true,
minHeight: 56,
})
const rowRenderer = ({index, key, parent, style}) => {
// State pulled from API
return <CellMeasurer
cache={cache}
columnIndex={0}
key={key}
rowIndex={index}
parent={parent}
>
{({registerChild}) => (
<div style={style}>
<Input multiline value={state.elements[index].text}/>
</div>
)}
</CellMeasurer>
}
return <List
width={650}
height={600}
deferredMeasurementCache={cache}
overscanRowCount={2}
rowHeight={cache.rowHeight}
rowCount={state.elements.length}
rowRenderer={rowRenderer}
/>
}
thanks