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
83
84
85
86
87
88
89
90
// PUPPY_DATA is a static array of data from petfinder api
//    that gets loaded via script tag for the examples
let puppyCollection = new Backbone.Collection(PUPPY_DATA)
 
// If your Backbone collection has an onDatagridSort method, that will be called
// to sort the grid.    You MUST call options.success() or options.error()
puppyCollection.onDatagridSort = function(columnKey, direction, columnDef, options={}){
  // Normally in the this method we would call fetch to fetch a sorted collection and
  // pass through the options like:
  //   
  //    options = _.extend({}, options, {
  //        data: {sort: columnKey, sortDir: direction}
  //    })
  //    this.fetch(options)
  //
  // FOR DEMO PURPOSES ONLY
  // below is essentially what the datagrid internal sort will do for you
  // if sorting on one attribute in the model is what you want, you could
  // skip
  this.models = this.models.sort(function(a, b){
    let aVal = a.get(columnKey)
    let bVal = b.get(columnKey)
    let isNumeric = isFinite(aVal) && isFinite(bVal)
    if( direction == "DESC" ){
      let temp = aVal; aVal = bVal; bVal = temp
    }
    if( isNumeric ){
      return aVal - bVal
    } else {
      aVal = (aVal || "").toString()
      bVal = (bVal || "").toString()
      return aVal.localeCompare(bVal)
    }
  })
  alert('we can sort our own grid, thank you very much')
  options.success(this)
}
 
class CollectionSortingDatagridDisplay extends React.Component {
  static displayName = "CollectionSortingDatagridDisplay"
   
  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 sortable.
            // Since we want all columns except one to be sortable...
            sortable: true
          }}/>
      </div>
    )
  }
   
  getColumns(){
    return [{
      key: 'imageUrl',
      name: 'Image',
      width: 120,
      datum: ReactDatum.LazyPhoto,
      // explicit column definition takes precedence over defaultColumnDef prop
      sortable: 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 = CollectionSortingDatagridDisplay