The Demo:
The Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | const DEFAULT_COLUMN_WIDTH = 150; const COLUMNS = [{ key: 'imageUrl' , width: 120, },{ key: 'name' , },{ key: 'breed' , },{ key: 'size' , width: 80, },{ key: 'sex' , width: 80, },{ key: 'contactEmail' , width: 200, },{ key: 'contactCity' , },{ key: 'petfinderURL' },{ key: 'description' , width: 200 }] class Datagrid extends React.Component { render() { return ( < div style={{width: 400, height: 300}}> < ReactVirtualized.AutoSizer > { ({height, width}) => < ReactVirtualized.Grid height={height} width={width} columnCount={COLUMNS.length} rowHeight={100} rowCount={PUPPY_DATA.length} cellRenderer={ this .cellRenderer} columnWidth={ this .getColumnWidth} /> } </ ReactVirtualized.AutoSizer > </ div > ) } cellRenderer({rowIndex, columnIndex, key, isScrolling, isVisible, style}) { style = _.extend({}, style, { wordWrap: 'break' , border: '1px solid whitesmoke' , overflow: 'hidden' }) return ( < div style={style} key={key}> < span >{PUPPY_DATA[rowIndex][COLUMNS[columnIndex].key]}</ span > </ div > ) } getColumnWidth({index}){ return COLUMNS[index].width || DEFAULT_COLUMN_WIDTH } } window.Demo = Datagrid |