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