How to customize the React Gantt Component?

a) How to populate the own datasource ?

Instead of passing Url as a props, you can also populate your own data by passing DataSource as a props of GanttControl.

If you want to populate data with AJAX calls, then you should define "async :false" on the ajax request. The code below illustrates how the GanttcontrolSkeleton component calls the GanttControl component with DataSource as the props .

class GanttcontrolSkeleton extends React.Component{

render(){

return(

<div >

<GanttControl

// Set DataSource option as props.

DataSource= {this.data}/* your data */

</div>

);

}

b) How to define customize columns in React Component ?

You can also customize the columns data and it should set as "columns" option in GanttControl component. The below code will explain how to do this.

class GanttcontrolSkeleton extends React.Component {

render() {

return (

<div>

<GanttControl

// Set columns option as props.

columns = {this.columns} /* your column data */

</div>

);

}