Name	Type	Description
children?	`GanttView \| GanttView[]`	Specify the available `view` components as `children` and the Gantt will match the currently selected view and render it.
className?	`string`	Sets custom CSS classes to the Gantt DOM element.
columnMenu?	`React.ComponentType<any>`
columnMenuFilter?	`CompositeFilterDescriptor[]`
columns?	`GanttColumnProps[]`	A collection of `GanttColumnProps` for creating columns.
defaultView?	`string`	Sets the initially selected view. The available values are: `day` `week` (Default) `month` `year`
dependencyData?	`any[]`	Sets the dependency data of the Gantt component. The data is then parsed and rendered as a visual connections between Gantt tasks.
dependencyModelFields?	`GanttDependencyModelFields`	The names of the model fields from which the Gantt will read its task data.
filter?	`FilterDescriptor[]`	The descriptors by which the data is filtered (more information and examples). This affects the values and buttons in the `FilterRow` of the Gantt.
navigatable?	`boolean`	If set to `true`, the user can use dedicated shortcuts to interact with the Gantt. By default, navigation is disabled and the Gantt content is accessible in the normal tab sequence.
noRecords?	`React.ReactElement<GanttNoRecordsProps>`	Represents the component that will be rendered when the `data` property of the Gantt is empty or undefined.
reorderable?	`boolean`	If set to `true`, the user can reorder columns by dragging their header cells.
resizable?	`boolean`	If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells.
row?	`React.ComponentType<GanttRowProps>`	The Gantt row component.
rowHeight?	`number`	Defines the row height and implements equal heights for all rows.
selectable?	`GanttSelectableSettings`	The Gantt selectable settings.
sort?	`SortDescriptor[]`	The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
sortable?	`SortSettings`	Enables sorting (see example).
style?	`React.CSSProperties`	Represents the `style` HTML attribute.
taskData?	`any[]`	Sets the task data of the Gantt component. The data is then parsed and rendered as a visual Gantt tasks.
taskModelFields?	`GanttTaskModelFields`	The names of the model fields from which the Gantt will read its task data.
timezone?	`string`	Specifies the id of the timezone that will be displayed in the Gantt. For example, `Europe/Sofia`.
toolbar?	`{ addTaskButton: boolean; }`	Allow configuration of the Gantt toolbar. Currently allows enabling the add button.
view?	`string`	Sets the currently selected view. The value is matched with the `title` property of the view.

Methods

onAddClick

Fires when the user clicks on Gantt add button.

Parameters
event	`GanttAddClickEvent`

onColumnMenuFilterChange

Parameters
event	`GanttColumnMenuFilterChangeEvent`

onColumnReorder

Fires when the columns are reordered.

Parameters
event	`GanttColumnReorderEvent`

onColumnResize

Fires when a column is resized.

Parameters
event	`GanttColumnResizeEvent`

onDataStateChange

Fires when the data state of the Gantt is changed.

Parameters
event	`GanttDataStateChangeEvent`

onDependencyCreate

Fires when the user creates dependecy between two tasks.

Parameters
event	`GanttDependencyCreateEvent`

onExpandChange

Fires when the user clicks on the expand or collapse icon of a row.

Parameters
event	`GanttExpandChangeEvent`

onFilterChange

Fires when the Gantt filter is modified through the UI (more information and examples). You have to handle the event yourself and filter the data.

Parameters
event	`GanttFilterChangeEvent`

onHeaderSelectionChange

Fires when the user clicks the checkbox of a column header whose field matches selectedField

Parameters
event	`GanttHeaderSelectionChangeEvent`

onKeyDown

Fires when the user press keyboard key.

Parameters
event	`GanttKeyDownEvent`

onRowClick

Fires when the user clicks a row.

Parameters
event	`GanttRowClickEvent`

onRowContextMenu

Fires when the user trigger the context menu of row.

Parameters
event	`GanttRowContextMenuEvent`

onRowDoubleClick

Fires when the user double clicks a row.

Parameters
event	`GanttRowDoubleClickEvent`

onSelectionChange

Fires when the user tries to select or deselect a row or cell.

Parameters
event	`GanttSelectionChangeEvent`

onSortChange

Fires when the sorting of the Gantt is changed (see example). You have to handle the event yourself and sort the data.

Parameters
event	`GanttSortChangeEvent`

onTaskClick

Fires when the user clicks a task.

Parameters
event	`GanttTaskClickEvent`

onTaskContextMenu

Fires when the user trigger the context menu of task.

Parameters
event	`GanttTaskContextMenuEvent`

onTaskDoubleClick

Fires when the user double clicks a task.

Parameters
event	`GanttTaskDoubleClickEvent`

onTaskRemoveClick

Fires when the user clicks the task remove action.

Parameters
event	`GanttTaskRemoveClickEvent`

onViewChange

Called when new view is selected. Useful for controlling the selected view.

Parameters
args	`GanttViewChangeEvent`

GanttProps

In this article

Not finding the help you need?

Getting Started

Support Resources

Community