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 |