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 | // PUPPY_DATA is a static array of data from petfinder api that gets loaded via script tag // for the examples. In a real application, you would probably fetch() the collection. let puppyCollection = new Backbone.Collection(PUPPY_DATA) class BasicDatagridDisplay extends React.Component { static displayName = "BasicDatagridDisplay" render(){ // ReactDatumDatagrid will fill what ever element it is placed in // Below we constrain it to 100% of the demo pane and a fixed width of 600px // You can also use Flex! See TODO Flexy Demo return ( < div style={{height: "100%" , width: 600}}> < ReactDatumDatagrid.Datagrid collection={puppyCollection} columns={ this .getColumns()} headerHeight={40} rowHeight={110} defaultColumnDef={{ width: 150 }}/> </ div > ) } getColumns(){ return [{ key: 'imageUrl' , name: 'Image' , width: 120, datum: ReactDatum.LazyPhoto, locked: true },{ key: 'name' , },{ key: 'breed' , },{ key: 'size' , width: 80, },{ key: 'sex' , width: 80, },{ key: 'contactEmail' , width: '200' , datum: ReactDatum.Email, datumProps: { ellipsizeAt: false , reverseEllipsis: true , } }] } } window.Demo = BasicDatagridDisplay |