Gantt Chart Editing Capabilities

In this tutorial, we will introduce how to use the editing capabilities of @visactor/vtable-gantt.

Since the left side is a complete ListTable, you can directly refer to the editing tutorial in ListTable.

Steps to Use

1. Import the VTable editor package:

Using NPM Package

First, make sure that the VTable library @visactor/vtable and the related editor package @visactor/vtable-editors are correctly installed. You can use the following commands to install them:

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

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

Import the required types of editor modules in the code:

import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';

Using CDN

You can also get the built VTable-Editor files through CDN.

<script src="https://unpkg.com/@visactor/vtable-editors@latest/dist/vtable-editors.min.js"></script>
<script>
  const inputEditor = new VTable.editors.InputEditor();
</script>

2. Create Editors:

The VTable-editors library currently provides four types of editors, including text input box, multi-line text input box, date picker, and drop-down list. You can choose the appropriate editor according to your needs. (The drop-down list editor is still being optimized and currently looks quite ugly, haha)

Here is an example code for creating editors:

const inputEditor = new InputEditor();
const textAreaEditor = new TextAreaEditor();
const dateInputEditor = new DateInputEditor();
const listEditor = new ListEditor({ values: ['Female', 'Male'] });

In the above example, we created a text input box editor (InputEditor), a multi-line text box editor (TextAreaEditor), a date picker editor (DateInputEditor), and a drop-down list editor (ListEditor). You can choose the appropriate editor type according to your actual needs.

3. Register and Use Editors:

Before using the editors, you need to register the editor instances to VTable:

// import * as VTable from '@visactor/vtable';
// Register editors to VTable
VTableGantt.VTable.register.editor('name-editor', inputEditor);
VTableGantt.VTable.register.editor('name-editor2', inputEditor2);
VTableGantt.VTable.register.editor('textArea-editor', textAreaEditor);
VTableGantt.VTable.register.editor('number-editor', numberEditor);
VTableGantt.VTable.register.editor('date-editor', dateInputEditor);
VTableGantt.VTable.register.editor('list-editor', listEditor);

Next, specify the editor to be used in the columns configuration:

columns: [
  { title: 'name', field: 'name', editor(args)=>{
    if(args.row%2 === 0)
      return 'name-editor';
    else
      return 'name-editor2';
  } },
  { title: 'age', field: 'age', editor: 'number-editor' },
  { title: 'gender', field: 'gender', editor: 'list-editor' },
  { title: 'address', field: 'address', editor: 'textArea-editor' },
  { title: 'birthday', field: 'birthDate', editor: 'date-editor' },
]

In the left task list table, users can start editing by double-clicking (or other interaction methods) the cell.

Example

If you have custom editing needs, please refer to the complete tutorial documentation: Editing Tutorial.

Currently, editing is only supported in the task list table. The editing capabilities of the task bar only support dragging the width and position, and direct editing on the task bar is not yet supported.