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 | // 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) class SelfSortingDatagridDisplay 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 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 = SelfSortingDatagridDisplay |