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 70 71 72 73 74 75 76 77 78 79 80 81 82 | let saveCount = 0 let PuppyModel = Backbone.Model.extend({ // Stub out save method and pretend it saved successfully (FOR DEMO PURPOSES ONLY) save: function (attrs, options){ saveCount++ // add a few seconds delay to see the saving indicator _.delay( function (){ // simulate a failure on every 5th Edit if ( saveCount % 5 == 0 ){ options.error( this , "Not cool, man. Not cool." , options) console.log( "Pretended to fail saving model." , attrs, this ) } else { options.success( this , "OK" , options) console.log( "Pretended to successfully save model." , attrs, this ) } }, 2000 ) return true } }) let PuppyCollection = Backbone.Collection.extend({ model: PuppyModel }) // PUPPY_DATA is a static array of data from petfinder api // that gets loaded via script tag for the examples let puppyCollection = new PuppyCollection(PUPPY_DATA) class EditableDatagridDisplay extends React.Component { static displayName = "EditableDatagridDisplay" render(){ return ( < div style={{height: "100%" , width: 900}}> < ReactDatumDatagrid.Datagrid collection={puppyCollection} columns={ this .getColumns()} headerHeight={40} rowHeight={110} defaultColumnDef={{ width: 150, // The default is normally not editable. // Since we want all columns except one to be editable... editable: true }}/> </ div > ) } getColumns(){ return [{ key: 'imageUrl' , name: 'Image' , width: 120, datum: ReactDatum.LazyPhoto, // explicit column definition takes precedence over defaultColumnDef prop editable: false },{ key: 'name' },{ key: 'breed' },{ key: 'size' , width: 80 },{ key: 'sex' , width: 80 },{ key: 'contactEmail' , width: '250' , datum: ReactDatum.Email, datumProps: { ellipsizeAt: false , reverseEllipsis: true , } }] } } window.Demo = EditableDatagridDisplay |