Getting Started

In this tutorial, we will introduce how to use @visactor/vtable-gantt to draw a simple Gantt chart.

Getting @visactor/vtable-gantt

Please note that @visactor/vtable-gantt is built on @visactor/vtable, so you need to install @visactor/vtable first to use @visactor/vtable-gantt.

You can get it in the following ways:

Using NPM Package

First, you need to install it in the root directory of your project using the following commands:


# Install using npm
npm install @visactor/vtable
npm install @visactor/vtable-gantt

# Install using yarn
yarn add @visactor/vtable
yarn add @visactor/vtable-gantt

Using CDN

You can also get the built vtable-gantt file through CDN.

<script src="https://unpkg.com/@visactor/vtable-gantt/dist/vtable-gantt.min.js"></script>
<script>
  const ganttInstance = new VTableGantt.Gantt(domContainer, option);
</script>

If you need to use the related functions of VTable or VRender, such as editing cells or custom rendering, please note that you should use VTableGantt.VTable and VTableGantt.VRender.

To introduce the ability of VTable, such as:

// Register icon or editor
VTableGantt.VTable.register.***
// Reference the theme of VTable
VTableGantt.VTable.themes.***
// Reference the custom rendering element of VTable
VTableGantt.VTable.CustomLayout.***

To introduce the ability of VRender to achieve custom rendering, such as:

// Use the Group element
VTableGantt.VRender.Group()

Importing VTableGantt

Importing via NPM Package

At the top of your JavaScript file, use import to bring in vtable-gantt:

import {Gantt} from '@visactor/vtable-gantt';

const ganttInstance = new Gantt(domContainer, option);

Importing via script tag

By directly adding a <script> tag in the HTML file, import the built vtable-gantt file:

<script src="https://unpkg.com/@visactor/vtable-gantt/dist/vtable-gantt.min.js"></script>
<script>
  const ganttInstance = new VTableGantt.Gantt(domContainer, option);
</script>

Drawing a Simple Gantt Chart

Before drawing, we need to prepare a DOM container with width and height for VTableGantt, and this container must be relatively positioned, i.e., its position must be set to 'absolute' or 'relative'.

Please ensure that the container's width and height values are integers, as VTable's internal logic uses the container's offsetWidth, offsetHeight, clientWidth, and clientHeight properties. If the container's width and height are decimals, it may cause errors in the values taken, potentially leading to table jitter issues.

<body>
  <div id="tableContainer" style="position: absolute; width: 600px;height:400px;"></div>
</body>

Next, we create a Gantt instance and pass in the Gantt chart configuration options:

At this point, you have successfully drawn a simple Gantt chart!

I hope this tutorial helps you learn how to use Gantt. Next, you can delve into the various configuration options of vtable-gantt to customize more diverse table effects.