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
// PUPPY_DATA is a static array of data from petfinder api that gets loaded via script tag
//   for the examples.  In a real application, you would probably fetch() the collection.
let puppyCollection = new Backbone.Collection(PUPPY_DATA)
 
 
class BasicDatagridDisplay extends React.Component {
  static displayName = "BasicDatagridDisplay"
   
  render(){
    // ReactDatumDatagrid will fill what ever element it is placed in
    // Below we constrain it to 100% of the demo pane and a fixed width of 600px
    // You can also use Flex!  See TODO Flexy Demo
    return (
      <div style={{height: "100%", width: 600}}>
        <ReactDatumDatagrid.Datagrid
          collection={puppyCollection}
          columns={this.getColumns()}
          headerHeight={40}
          rowHeight={110}
          defaultColumnDef={{
            width: 150
          }}/>
      </div>
    )
  }
   
  getColumns(){
    return [{
      key: 'imageUrl',
      name: 'Image',
      width: 120,
      datum: ReactDatum.LazyPhoto,
      locked: true
    },{
      key: 'name',
    },{
      key: 'breed',
    },{
      key: 'size',
      width: 80,
    },{
      key: 'sex',
      width: 80,
    },{
      key: 'contactEmail',
      width: '200',
      datum: ReactDatum.Email,
      datumProps: {
        ellipsizeAt: false,
        reverseEllipsis: true,
      }
    }]
  }
}
 
window.Demo = BasicDatagridDisplay