Responsive columns in React Gantt component
2 Feb 202319 minutes to read
You can toggle the column visibility based on media queries, which are defined in the hideAtMedia. The hideAtMedia accepts valid Media Queries.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
height = '450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='100' hideAtMedia = '(min-width:700px)'></ColumnDirective>
// column visibility hide when browser screen width lessthan 700px;
<ColumnDirective field='TaskName' headerText='Job Name' width='250'></ColumnDirective>
// it is always shown;
<ColumnDirective field='StartDate' hideAtMedia = '(max-width:500px)'></ColumnDirective>
// column Visibility show when browser screen width 500px or less;
<ColumnDirective field='Duration' hideAtMedia = '(min-width:500px)'></ColumnDirective>
// column visibility hide when browser screen width lessthan 700px;
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
height = '450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='100' hideAtMedia = '(min-width:700px)'></ColumnDirective>
// column visibility hide when browser screen width lessthan 700px;
<ColumnDirective field='TaskName' headerText='Job Name' width='250'></ColumnDirective>
// it is always shown;
<ColumnDirective field='StartDate' hideAtMedia = '(max-width:500px)'></ColumnDirective>
// column Visibility show when browser screen width 500px or less;
<ColumnDirective field='Duration' hideAtMedia = '(min-width:500px)'></ColumnDirective>
// column visibility hide when browser screen width lessthan 700px;
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Change tree/expander column
The tree/expander column is a column in the Gantt component, that has icons to expand or collapse the parent records. You can define the tree column index in the Gantt component by using the treeColumnIndex property and the default value of this property is 0. The following code example shows how to use this property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings = {
position : '90%'
};
return <GanttComponent dataSource={data} splitterSettings={splitterSettings} taskFields={taskFields} treeColumnIndex={2}
height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings: any = {
position : '90%'
};
return <GanttComponent dataSource={data} splitterSettings={splitterSettings} taskFields={taskFields} treeColumnIndex={2}
height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Show or Hide columns dynamically
You can show or hide gantt columns dynamically using external buttons by invoking the showColumn or hideColumn method.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings = {
columnIndex : 5
};
function show() {
/** show by HeaderText */
ganttInstance.showColumn(['Duration']);
}
function hide(){
/** hide by HeaderText */
ganttInstance.hideColumn(['Duration']);
}
return (<div>
<ButtonComponent onClick= { show }>Show</ButtonComponent>
<ButtonComponent onClick= { hide }>Hide</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields}
splitterSettings={splitterSettings} height = '450px'
ref={gantt => ganttInstance = gantt}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='100' ></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration'></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
</GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance: GanttComponent;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings: any = {
columnIndex : 5
};
function show() {
/** show by HeaderText */
ganttInstance.showColumn(['Duration']);
}
function hide(){
/** hide by HeaderText */
ganttInstance.hideColumn(['Duration']);
}
return (<div>
<ButtonComponent onClick= { show }>Show</ButtonComponent>
<ButtonComponent onClick= { hide }>Hide</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields}
splitterSettings={splitterSettings} height = '450px'
ref={gantt => ganttInstance = gantt}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='100' ></ColumnDirective>
<ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration' headerText='Duration'></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
</GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>