Reserver
id
type: string
Gives the reserver element an id attribute
className
type: string
Passes reserver className
style
type: object
Passes style to Reserver
dimension
type: object {width: number, height: number} | number
Takes either an object with the properties width and height or a number. This is the dimension of each cell
width
type: number
The width of the grid in pixels. The grid calculates the actual size by taking the width given devided by the width of the cell, the result is floored and then multiplied by that number. So it wont be exact but close.
height
type: number
The height of the grid in pixels. The grid calculates the actual size by taking the height given devided by the height of the cell, the result is floored and then multiplied by that number. So it wont be exact but close.
rowTitle
type: array | object | function
Each row can have a title. its the first cell either from the left or right depending on the direction.
The array is the final result. Each element in the array corrisponds to a cell in the title. if you want an empty cell it should have null
example:
If you pass a function it takes rowCount as a paramater and should return an array
example:
The function will rerun if the rowCount changes but sometimes you want the title to re-render anyway. In order to make that happen you pass in an object with a property of func whos value would be your function and a key of any other variable you want its change to cause a rerender.
In this example there is a state variable named error which if is true will rerender the function causing the title to be red instead of orange
example:
rowTitleWidth
type: number
The width of the title in pixles Notice that the width of the row is reduced from the total width of your provide so if you have a width is 1200 and your rowTitleWidth is 400 you will be left with 800 for your cells
columnTitle
type: array | object | function
Each column can have a title at the top of the table.
The array is the final result. Each element in the array corrisponds to a cell in the title. if you want an empty cell it should have null
example:
If you pass a function it takes columnCount as a paramater and should return an array
example:
The function will rerun if the columnCount changes but sometimes you want the title to re-render anyway. In order to make that happen you pass in an object with a property of func whos value would be your function and a key of any other variable you want its change to cause a rerender.
In this example there is a state variable named error which if is true will rerender the function causing the title to be red instead of orange
example:
columnTitleHeight
type: number
The height of the title in pixles
content
type: object
An object where each key corrisponds to a cell. The key format is r${number}c${number}
So if you want to put content into the top left cell you would do the following
mouseLeaveGrid
type: function
Runs when mouse leaves Reserver compoenent
mouseMoveGrid
type: function
Runs when mouse moves within the grid
columnTitleClassName
type: string
className for the title cells
cantonClassName
type: string
className for the canton
mouseDownCell
type: function
onMouseDown for cell. It receives two paramaters the first is an object with dimension. and cell dimension is object with with and height, the second paramater is the event. example:
mouseEnterCell
type: function
onMouseEnter for cell. It receives two paramaters the first is an object with dimension. and cell dimension is object with with and height, the second paramater is the event.
mouseUpCell
type: function
onMouseUp for cell. It receives two paramaters the first is an object with dimension. and cell dimension is object with with and height, the second paramater is the event.
mouseDropCell
type: function
onMouseDrop for cell. It receives two paramaters the first is an object with dimension. and cell dimension is object with with and height, the second paramater is the event.
mouseDragOverCell
type: function
onDragOver for cell. It receives two paramaters the first is an object with dimension. and cell dimension is object with with and height, the second paramater is the event.
cellClassName
type: string
className for cell
dir
type: string - 'rtl' or 'ltr'
default: 'ltr'
Direction 'right to left' or 'left to right'
children
type: array | function
You can pass the array bars as is but that limits you from accessing changing props
The function gets passed an object with rowCount, columnCount,rowTitleWidth,columnTitleHeight You will need these in order to calculate the position of the components on the grid. Reserver comes with a component called Bar which you can use to block out time. You are not limited to it and can build whatever component you want.