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
# is this cell selected
selected: PropTypes.bool
# is this cell currently being edited
editing: PropTypes.bool
# is this cell able to be edited
editable: PropTypes.bool
# backbone model or object 
rowData: PropTypes.object
# row index of row being rendered
rowIndex: PropTypes.number
# column defition object
column: PropTypes.object
# The collection the datagrid is rendering
collection: PropTypes.oneOfType([
  PropTypes.object
  PropTypes.array
]) 
# this component and the underlying Datum are controlled components
# the value of the cell will not update until the value prop is passed in
value: PropTypes.any
onChange: PropTypes.func
# called when user clicks edit icon
onEdit: PropTypes.func
# default styles to apply to cell
defaultCellStyle: PropTypes.object

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
# This should be an instance of a backbone collection or an array of javascript objects.  
# It can also be set through @context.collection or via Datagrid.setCollection() below.
collection: PropTypes.oneOfType([
  PropTypes.object
  PropTypes.array
]) 
# the columns are compatible with the prop of the same name passed to App.views.widgets.react.Datagrid
# see Class comment above for which column def attributes are used
columns: PropTypes.array
# orientation of columns and rows can be flipped by setting this prop to 'portrait'
orientation: PropTypes.oneOf(['landscape', 'portrait'])
# set to true to ignore column definition `editable` and make all cells readonly
readOnly: PropTypes.bool
# width of the "headers" (labels) when orientation == 'portrait' 
headerWidth: PropTypes.number
# height of the "headers" (labels) when orientation == 'portrait' 
headerHeight: PropTypes.number
# default column definition attributes
defaultColumnDef: PropTypes.object
# default component to render in data cells.  default: ReactDatumDatagrid.Cell
defaultCellComponent: PropTypes.any
# default component to render in header cell. default: ReactDatumDatagrid.HeaderCell
defaultHeaderComponent: PropTypes.any
# disables ctrl-Z to undo 
disableUndo: PropTypes.bool
# the index of the sorted column (if one is sorted)
sortColumnIndex: PropTypes.number
# the direction the sortColumnIndex column is sorted
sortDirection: PropTypes.oneOf(["ASC", "DESC"])
# callback to call when cell selections change
onSelectedCellsChange: PropTypes.func
# If provided, this callback method is called to sort the underlying collection
# when the user clicks the sort icon in the header.  
#
# If provided, you ** MUST ** also provide `sortColumnIndex` and `sortColumnDirection`
# 
# If not, provided, rdd will assume the collection is fully fetched will sort the collection
# internally.   
# 
# Called with (columnIndex, columnDef, direction, onComplete)
# you ** must call the onComplete ** method passed when sorting is complete
onSort: PropTypes.func

1
2
3
4
5
6
7
8
headerWidth: 150
headerHeight: 60
orientation: 'landscape'
defaultHeaderComponent: HeaderCell
defaultCellComponent: Cell
defaultColumnDef: {
  width: 120
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# the column definition
column: PropTypes.object
# the index of the column
columnIndex: PropTypes.number
# the collection the datagrid is rendered from 
collection: PropTypes.oneOfType([
  PropTypes.object
  PropTypes.array
])  
style: PropTypes.object
isSorting: PropTypes.bool
isSelecting: PropTypes.bool
sorted: PropTypes.oneOf(['ASC', 'DESC'])
# callback method called when user clicks sort indicator. Called with (evt, columnIndex)
onSort: PropTypes.func
# callback method called when user clicks column name called with (evt, columnIndex)
onSelectColumn: PropTypes.func
# orientation of the data rows 
orientation: PropTypes.oneOf(['portrait', 'landscape'])
# width of header when orientation is portrait and columnDef.width is ignored
width: PropTypes.number
# height of header when orientation is landscape and columnDef.height is ignored
height: PropTypes.number