Vue Gantt - Overview

DevExtreme Gantt is a project management component for scheduling and planning projects. It displays tasks on a timeline, visualizes dependencies between hierarchical tasks, and highlights task progress, milestones, and resource or team assignments. A configurable column view alongside the timeline supports filtering and sorting.

This overview highlights Gantt elements, key features, and what to explore next.

Elements

Gantt elements

  1. Toolbar
  2. Column Sort Button
  3. Header Filter
  4. Filter Row
  5. Selected Row
  6. Task Title
  7. Parent Task
  8. Task
  9. Task Dependency
  10. Resource
  11. Milestone Task
  12. In-Progress Task
  13. Task View Columns
  14. Timeline View
  15. Strip Line

Key Features

  • Task Creation
    You can specify tasks in the Gantt data source or enable the component's editing tools to create tasks.

  • Task Types
    Gantt supports multiple task types:

    • Regular Tasks
      Regular tasks display information such as duration (start and end dates), progress, dependencies, and resource assignments. You can also specify a task template to display custom markup.
    • Milestone Tasks
      Tasks without duration are milestones. You can implement these tasks to mark important points in your project with diamond shapes.
    • Nested Tasks
      Gantt highlights parent tasks and allows users to hide subtasks with drop-down buttons in the task view.

  • Selection and Editing
    DevExtreme Gantt supports operations such as task selection, as well as task, resource, and dependency addition/deletion.

  • Configurable Task View Columns
    The component task view displays task data in a list with configurable columns. You can integrate these columns to display task information. The task view does not scroll with the timeline and allows users to view details without horizontal scrolling.

  • Sorting
    The Gantt task view supports column sorting. Users can sort tasks in single or multiple mode. You can also implement custom sorting logic for each task view column.

  • Filtering
    Users can filter task view columns in header filters or a filter row. Gantt allows you to specify initial filter values, as well as custom filtering logic for each task view column.

  • Zooming and Scaling
    DevExtreme Gantt calculates an appropriate zoom level automatically based on displayed tasks. You can also configure a zoom level, as well as specify min/max zoom levels.

  • Strip Lines
    You can implement strip lines to highlight important points of time for your project.

  • Validation
    Gantt ships with configurable task validation capabilities.

  • Data Exporting
    You can export Gantt data as PDF files. For more information, refer to the following help topic: Gantt - Export Data.

  • Timeline View Customization
    You can specify the view's start and end dates, as well as configure task dependency, resource, and title visibility.

  • Task Templates
    You can specify custom markup for task content and tooltips. Gantt also supports templates for task editing tooltips (time and progress).

Explore More