react-gantt-timeline
A react timeline gantt component.
Intro
An awesome blazing fast timeline - gantt component.
-
Super fast. 😛
-
Infinite scrolling.
-
Made to be use with Redux.
-
Task update and resizing.
-
Support paging.
-
Can render more than a 100k records.
-
Implemented with virtual rendering.
-
Support Day Week and Month view.
-
Here is a demo video
Under test
- Gantt lines and constrains.
Under development
Road Map
- Full Test coverage.
- Zoom to task
Demo
Check out a working demo here
Installation
npm install react-gantt-timeline
Timeline Data
The timeline data can be set with the data property of the time line.
The data needs to be an array of object.
Each item of the array needs to contain the following elements.
Property | value | Descriptions |
---|
start | date | The start date of the task |
end | date | The end date of the task |
name | string | The name of the task to be diplayed |
let data=[ {start:new Date(), end:new Date()+1 ,name:'Demo Task'}]
Timeline Events
name | params | Descriptions |
---|
onNeedData | start:Date,end :date | Is trigger everytime the timeline load a new period, provide the start and end date of the period to load, this method is useful for implementing pagin or filter your data to only show tasks for the relevant period |
onSelectItem | item:Object | This even is trigger when a item is selected by the time line |
onUpdateItem | item:Object,props:Object | This even is trigger when a item has been updated, it recive the item to be updated and the properties and values to by apply |
Other properties
Property | value | Descriptions |
---|
mode | string | set the zoom lever of the timeline.The possible values are:"month","week","day" |
itemHeigth | number | The height of the row 30px by default |
Some Demo Code
- Crud Demo.
- Coming up a redux demo.