// Same example using react-virtualized
import React from 'react';
import { AutoSizer, List, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
export class DynamicVirtualScrollExample extends React.PureComponent
{
useFixedHeader = true
constructor()
{
super();
const items = [];
for (let i = 0; i < 1000; i++)
{
items[i] = 30 + Math.round(Math.random()*50);
}
this.state = { items };
this.cache = new CellMeasurerCache({
fixedWidth: true,
defaultHeight: 55,
});
}
renderItems(start, count)
{
return this.state.items.slice(start, start+count).map((item, index) => (
this.itemElements[index+start] = e}
style={{height: item+'px', color: 'white', textAlign: 'center', lineHeight: item+'px', background: 'rgb('+Math.round(item*255/80)+',0,0)'}}>
№ {index+start}: {item}px
));
}
renderRow = ({ index, key, style, parent }) =>
{
const item = this.state.items[index];
return (
this.itemElements[index] = e}
style={{...style, height: item+'px', color: 'white', textAlign: 'center', lineHeight: item+'px', background: 'rgb('+Math.round(item*255/80)+',0,0)'}}>
№ {index}: {item}px
);
}
render()
{
this.itemElements = [];
return (
{({ width, height }) => {
return
}}
{this.useFixedHeader ?
fixed header
: null}
);
}
}