DEV Community: 刘方方

How can cursor+deepseek be used to minimize the cost of learning a component library!

刘方方 — Thu, 06 Feb 2025 11:21:37 +0000

In today's software development field, developers are facing the challenges of constantly improving development efficiency and reducing the cost of getting started. The core purpose of this document is to help developers achieve this goal, especially by ingeniously using the official website documentation of components, combined with tools such as Cursor and DeepSeek, to allow AI to automatically generate the required code. Next, we will take the VTable table component in the VisActor visualization library as an example to elaborate the entire process in detail.

Introduction to the VTable component

VTable is a powerful table component in the VisActor visualization library. It is specially designed to meet the diverse needs of data display, with a high degree of flexibility and customizability. Whether it is a simple list of data or a complex data analysis display scenario, VTable can provide excellent solutions.
VTable has the following core features:

Supports multiple table types: basic table, pivot table, transposed table, pivot chart, etc.
Powerful interaction functions: sorting, filtering, row and column dragging, cell editing, etc.
Rich cell types: text, chart, progress bar, checkbox, mini-chart, etc.
High-performance rendering: supports smooth display of millions of data
Multi-terminal adaptation: perfectly supports mainstream frameworks such as Vue and React

Development steps

Create a project

First, we need to create an initialization project (take Vue as an example). Run relevant commands to build the basic environment for subsequent use of the VTable component.

Configure the deepseek model in the cursor.

Invoke the AI interaction panel in Cursor and generate code

After the project environment is set up, use cmd + i to invoke the AI interaction panel. We directly ask the AI to generate a basic table code of VTable for inserting into the file.

However, the initial generation result shows that the AI does not recognize the ListTable of the VTable, possibly because it cannot accurately identify the configuration of the VTable's ListTable.

Inject the official website tutorial into @Docs

To solve the above problems, we inject the official website tutorial into @Docs.

Explicitly specify "VisActor VTable" in @Docs in the prompt. After this operation, we were pleasantly surprised to find that the AI can correctly write the implementation logic according to the option in the VTable.

Code Application and Effect Demonstration

Copy the generated code into the corresponding file, run the project, and you can see the initial effect that the table has been correctly generated.

After that, we continued to ask the AI to modify the table style. The AI gave reasonable modification suggestions.

After running the project again, we got a presentation effect that is more in line with the requirements:

The advantages of combining the VTable component library with Cursor

Enhance development efficiency
Quick access: Directly consult the VTable API documentation through Cursor
Intelligent prompts: Precise code completion based on the VTable documentation
Enhance the development experience
Seamless integration: Directly obtain VTable usage guidance in the development environment
Real-time feedback: Quickly verify the code effect
Reduce learning costs
Document assistance: Consult VTable official examples at any time
Code generation: Automatically generate code that complies with VTable specifications
Improve code quality
Specification check: Ensure that the code complies with VTable best practices
Performance optimization: Automatically generate high-performance table configurations VisActorVTable provides developers with a powerful table solution. Combined with the use of AI****tools, it can significantly improve development efficiency and reduce learning costs. Welcome to visit the VisActor official website to learn more about VTable functions and cases.

VTable：https://visactor.io/vtable
Discord：discord.gg/3wPyxVyH6m
github：github.com/VisActor

VTable-Gantt：Powerful and high-performance open-source Gantt chart component

刘方方 — Mon, 16 Dec 2024 08:08:11 +0000

The Basic Concept of Gantt Chart

In project management, the Gantt chart is a commonly used tool for presenting the time arrangement and progress of project tasks.
We split the Gantt chart into the following parts:

Left task list: Displays the task list of the project, usually on the left side of the chart.
Top time axis: Displays the time range of the project, usually at the top or bottom of the chart.
Task bars: Represent the start and end time of each task.
Grid lines: Used to separate the time axis and task bars, making the chart clearer.
Marker lines: Used to mark important time points.
Separation lines: Used to separate the task list and time axis, making the chart clearer.

VTable-Gantt

VTable-Gantt is a powerful Gantt chart drawing tool built based on the VTable table component and the canvas rendering engine VRender, which can help developers easily create and manage Gantt charts.
Core capabilities are as follows:

High performance: Supports fast calculation and rendering of large-scale project data to ensure a smooth user experience.
Flexible layout: Supports customizing the time axis, task bar style, and layout to meet different project management needs.
Powerful interaction: Provides dragging, zooming, and editing functions of tasks to simplify project management operations.
Rich visualization capabilities: Supports custom rendering of information cells and task bars, and provides a tree structure display to enhance the diversity and intuitiveness of data display. ## Obtaining @visactor/vtable-gantt It should be noted that @visactor/vtable-gantt is built based on @visactor/vtable, so you need to install @visactor/vtable first to use @visactor/vtable-gantt. Using the NPM package First, you need to install it in the project root directory using the following command:

使用 npm 安装
npm install @visactor/vtable
npm install @visactor/vtable-gantt

使用 yarn 安装
yarn add @visactor/vtable
yarn add @visactor/vtable-gantt

Introduction to VTableGantt

Import through the NPM package
Use import at the top of the JavaScript file to import vtable-gantt:

import {Gantt} from '@visactor/vtable-gantt';
const ganttInstance = new Gantt(domContainer, option);

Draw a simple Gantt chart
Before drawing, we need to prepare a DOM container with width and height for VTableGantt.

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

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

import {Gantt} from '@visactor/vtable-gantt';
const records = [
  {
    id: 1,
    title: 'Task 1',
    developer: 'liufangfang.jane@bytedance.com',
    start: '2024-07-24',
    end: '2024-07-26',
    progress: 31,
    priority: 'P0',
  },
  {
    id: 2,
    title: 'Task 2',
    developer: 'liufangfang.jane@bytedance.com',
    start: '07/24/2024',
    end: '08/04/2024',
    progress: 60,
    priority: 'P0'
  },
  ...
];

const columns = [
  {
    field: 'title',
    title: 'title',
    width: 'auto',
    sort: true,
    tree: true,
    editor: 'input'
  },
  {
    field: 'start',
    title: 'start',
    width: 'auto',
    sort: true,
    editor: 'date-input'
  },
  {
    field: 'end',
    title: 'end',
    width: 'auto',
    sort: true,
    editor: 'date-input'
  }
];
const option = {
  overscrollBehavior: 'none',
  records,
  taskListTable: {
    columns,
  },
  taskBar: {
    startDateField: 'start',
    endDateField: 'end',
    progressField: 'progress'
  },
  timelineHeader: {
    colWidth: 100,
    backgroundColor: '#EEF1F5',
    horizontalLine: {
      lineWidth: 1,
      lineColor: '#e1e4e8'
    },
    verticalLine: {
      lineWidth: 1,
      lineColor: '#e1e4e8'
    },
    scales: [
      {
        unit: 'day',
        step: 1,
        format(date) {
          return date.dateIndex.toString();
        },
        style: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white',
          strokeColor: 'black',
          textAlign: 'right',
          textBaseline: 'bottom',
          backgroundColor: '#EEF1F5'
        }
      }
    ]
  },
};
const ganttInstance = new Gantt(document.getElementById("tableContainer"), option);

Demo result：

The main capabilities of the Gantt chart

Multi-column information display on the left side of the table

The left side of the entire structure of the Gantt chart is a complete table container, so it can support rich column information display and custom rendering capabilities.

import * as VTableGantt from '@visactor/vtable-gantt';
let ganttInstance;
const records = [
 ...
];

const columns = [
  ....
];
const option = {
  overscrollBehavior: 'none',
  records,
  taskListTable: {
    columns,
    tableWidth: 250,
    minTableWidth: 100,
    maxTableWidth: 600,
    theme: {
      headerStyle: {
        borderColor: '#e1e4e8',
        borderLineWidth: 1,
        fontSize: 18,
        fontWeight: 'bold',
        color: 'red',
        bgColor: '#EEF1F5'
      },
      bodyStyle: {
        borderColor: '#e1e4e8',
        borderLineWidth: [1, 0, 1, 0],
        fontSize: 16,
        color: '#4D4D4D',
        bgColor: '#FFF'
      }
    }
  },
  .....
};
ganttInstance = new VTableGantt.Gantt(document.getElementById(CONTAINER_ID), option);

The configuration items of the list table taskListTable, where the following can be configured:

Overall width of the left table: Through the tableWidth configuration item, the overall width of the task list table can be set.
Column information: Through columns, the column information and width of each column of the task information table can be defined.
Style configuration: Through the theme.headerStyle and theme.bodyStyle configuration items, the styles of the table header and body can be set.
Width limits: Through the minTableWidth and maxTableWidth configuration items, the minimum and maximum widths of the task list can be set. The complete code can be found at: https://visactor.io/vtable/demo/gantt/gantt-basic For specific configuration, please refer to the official website configuration: https://visactor.io/vtable/option/Gantt#taskListTable The effect is as follows:

Custom Rendering

Corresponding to the official website demo: https://visactor.io/vtable/demo/gantt/gantt-customLayout, this component provides rich custom rendering capabilities.

Custom rendering requires understanding the primitive attributes of VRender, and specific details can be referred to in the custom rendering tutorial: https://visactor.io/vtable/guide/gantt/gantt_customLayout

Custom Rendering of Task Bars

Through the taskBar.customLayout configuration item, the rendering method of task bars can be customized. For example:

taskBar: {
      startDateField: 'start',
      endDateField: 'end',
      progressField: 'progress',
      customLayout: args => {
        const colorLength = barColors.length;
        const { width, height, index, startDate, endDate, taskDays, progress, taskRecord, ganttInstance } = args;
        const container = new VRender.Group({
          width,
          height,
          cornerRadius: 30,
          fill: {
            gradient: 'linear',
            x0: 0,
            y0: 0,
            x1: 1,
            y1: 0,
            stops: [
              {
                offset: 0,
                color: barColors0[index % colorLength]
              },
              {
                offset: 0.5,
                color: barColors[index % colorLength]
              },
              {
                offset: 1,
                color: barColors0[index % colorLength]
              }
            ]
          },
          display: 'flex',
          flexDirection: 'row',
          flexWrap: 'nowrap'
        });
        const containerLeft = new VRender.Group({
          height,
          width: 60,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'space-around'
          // fill: 'red'
        });
        container.add(containerLeft);

        const avatar = new VRender.Image({
          width: 50,
          height: 50,
          image: taskRecord.avatar,
          cornerRadius: 25
        });
        containerLeft.add(avatar);
        const containerCenter = new VRender.Group({
          height,
          width: width - 120,
          display: 'flex',
          flexDirection: 'column'
          // alignItems: 'left'
        });
        container.add(containerCenter);

        const developer = new VRender.Text({
          text: taskRecord.developer,
          fontSize: 16,
          fontFamily: 'sans-serif',
          fill: 'white',
          fontWeight: 'bold',
          maxLineWidth: width - 120,
          boundsPadding: [10, 0, 0, 0]
        });
        containerCenter.add(developer);

        const days = new VRender.Text({
          text: `${taskDays}天`,
          fontSize: 13,
          fontFamily: 'sans-serif',
          fill: 'white',
          boundsPadding: [10, 0, 0, 0]
        });
        containerCenter.add(days);

        if (width >= 120) {
          const containerRight = new VRender.Group({
            cornerRadius: 20,
            fill: 'white',
            height: 40,
            width: 40,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center', // 垂直方向居中对齐
            boundsPadding: [10, 0, 0, 0]
          });
          container.add(containerRight);

          const progressText = new VRender.Text({
            text: `${progress}%`,
            fontSize: 12,
            fontFamily: 'sans-serif',
            fill: 'black',
            alignSelf: 'center',
            fontWeight: 'bold',
            maxLineWidth: (width - 60) / 2,
            boundsPadding: [0, 0, 0, 0]
          });
          containerRight.add(progressText);
        }
        return {
          rootContainer: container
          // renderDefaultBar: true
          // renderDefaultText: true
        };
      },
      hoverBarStyle: {
        cornerRadius: 30
      }
    },

Custom Rendering of Date Headers

Through the timelineHeader.scales.customLayout configuration item, the rendering method of the date header can be customized. For example:

timelineHeader: {
      backgroundColor: '#f0f0fb',
      colWidth: 80,
      scales: [
        {
          unit: 'day',
          step: 1,
          format(date) {
            return date.dateIndex.toString();
          },
          customLayout: args => {
            const colorLength = barColors.length;
            const { width, height, index, startDate, endDate, days, dateIndex, title, ganttInstance } = args;
            const container = new VRender.Group({
              width,
              height,
              fill: '#f0f0fb',
              display: 'flex',
              flexDirection: 'row',
              flexWrap: 'nowrap'
            });
            const containerLeft = new VRender.Group({
              height,
              width: 30,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'space-around'
              // fill: 'red'
            });
            container.add(containerLeft);

            const avatar = new VRender.Image({
              width: 20,
              height: 30,
              image:
                '<svg t="1724675965803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4299" width="200" height="200"><path d="M53.085678 141.319468C23.790257 141.319468 0 165.035326 0 194.34775L0 918.084273C0 947.295126 23.796789 971.112572 53.085678 971.112572L970.914322 971.112572C1000.209743 971.112572 1024 947.396696 1024 918.084273L1024 194.34775C1024 165.136896 1000.203211 141.319468 970.914322 141.319468L776.827586 141.319468 812.137931 176.629813 812.137931 88.275862C812.137931 68.774506 796.328942 52.965517 776.827586 52.965517 757.32623 52.965517 741.517241 68.774506 741.517241 88.275862L741.517241 176.629813 741.517241 211.940158 776.827586 211.940158 970.914322 211.940158C961.186763 211.940158 953.37931 204.125926 953.37931 194.34775L953.37931 918.084273C953.37931 908.344373 961.25643 900.491882 970.914322 900.491882L53.085678 900.491882C62.813237 900.491882 70.62069 908.306097 70.62069 918.084273L70.62069 194.34775C70.62069 204.087649 62.74357 211.940158 53.085678 211.940158L247.172414 211.940158C266.67377 211.940158 282.482759 196.131169 282.482759 176.629813 282.482759 157.128439 266.67377 141.319468 247.172414 141.319468L53.085678 141.319468ZM211.862069 176.629813C211.862069 196.131169 227.671058 211.940158 247.172414 211.940158 266.67377 211.940158 282.482759 196.131169 282.482759 176.629813L282.482759 88.275862C282.482759 68.774506 266.67377 52.965517 247.172414 52.965517 227.671058 52.965517 211.862069 68.774506 211.862069 88.275862L211.862069 176.629813ZM1024 353.181537 1024 317.871192 988.689655 317.871192 35.310345 317.871192 0 317.871192 0 353.181537 0 441.457399C0 460.958755 15.808989 476.767744 35.310345 476.767744 54.811701 476.767744 70.62069 460.958755 70.62069 441.457399L70.62069 353.181537 35.310345 388.491882 988.689655 388.491882 953.37931 353.181537 953.37931 441.457399C953.37931 460.958755 969.188299 476.767744 988.689655 476.767744 1008.191011 476.767744 1024 460.958755 1024 441.457399L1024 353.181537ZM776.937913 582.62069C796.439287 582.62069 812.248258 566.811701 812.248258 547.310345 812.248258 527.808989 796.439287 512 776.937913 512L247.172414 512C227.671058 512 211.862069 527.808989 211.862069 547.310345 211.862069 566.811701 227.671058 582.62069 247.172414 582.62069L776.937913 582.62069ZM247.172414 688.551724C227.671058 688.551724 211.862069 704.360713 211.862069 723.862069 211.862069 743.363425 227.671058 759.172414 247.172414 759.172414L600.386189 759.172414C619.887563 759.172414 635.696534 743.363425 635.696534 723.862069 635.696534 704.360713 619.887563 688.551724 600.386189 688.551724L247.172414 688.551724ZM776.827586 211.940158 741.517241 176.629813 741.517241 247.328574C741.517241 266.829948 757.32623 282.638919 776.827586 282.638919 796.328942 282.638919 812.137931 266.829948 812.137931 247.328574L812.137931 176.629813 812.137931 141.319468 776.827586 141.319468 247.172414 141.319468C227.671058 141.319468 211.862069 157.128439 211.862069 176.629813 211.862069 196.131169 227.671058 211.940158 247.172414 211.940158L776.827586 211.940158ZM282.482759 176.629813C282.482759 157.128439 266.67377 141.319468 247.172414 141.319468 227.671058 141.319468 211.862069 157.128439 211.862069 176.629813L211.862069 247.328574C211.862069 266.829948 227.671058 282.638919 247.172414 282.638919 266.67377 282.638919 282.482759 266.829948 282.482759 247.328574L282.482759 176.629813Z" fill="#389BFF" p-id="4300"></path></svg>'
            });
            containerLeft.add(avatar);

            const containerCenter = new VRender.Group({
              height,
              width: width - 30,
              display: 'flex',
              flexDirection: 'column'
              // alignItems: 'left'
            });
            container.add(containerCenter);
            const dayNumber = new VRender.Text({
              text: String(dateIndex).padStart(2, '0'),
              fontSize: 20,
              fontWeight: 'bold',
              fontFamily: 'sans-serif',
              fill: 'black',
              textAlign: 'right',
              maxLineWidth: width - 30,
              boundsPadding: [15, 0, 0, 0]
            });
            containerCenter.add(dayNumber);

            const weekDay = new VRender.Text({
              text: VTableGantt.tools.getWeekday(startDate, 'short').toLocaleUpperCase(),
              fontSize: 12,
              fontFamily: 'sans-serif',
              fill: 'black',
              boundsPadding: [0, 0, 0, 0]
            });
            containerCenter.add(weekDay);
            return {
              rootContainer: container
            };
          }
        }
      ]
    },

Custom rendering of the left task information table

Custom rendering of each column cell can be defined through taskListTable.columns.customLayout, or custom rendering of each cell can be globally defined through taskListTable.customLayout.

Support for different date scale granularities

In common business scenarios, it may be necessary to involve the display of multiple layers of time scales. VTable-Gantt supports five time granularities: 'day' | 'week' |'month' | 'quarter' | 'year'.
Through the timelineHeader.scales.unit configuration item, the row height and time unit (such as day, week, month, etc.) of the date scale can be set.
At the same time, different header styles can be configured for different time granularities:
Through the timelineHeader.scales.style configuration item, the style of the date header can be customized.
Through the timelineHeader.scales.rowHeight configuration item, the row height of the date scale can be set.


 timelineHeader: {
    colWidth: 100,
    backgroundColor: '#EEF1F5',
   .....
    scales: [
      {
        unit: 'week',
        step: 1,
        startOfWeek: 'sunday',
        format(date) {
          return `Week ${date.dateIndex}`;
        },
        style: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white',
          strokeColor: 'black',
          textAlign: 'right',
          textBaseline: 'bottom',
          backgroundColor: '#EEF1F5',
          textStick: true
          // padding: [0, 30, 0, 20]
        }
      },
      {
        unit: 'day',
        step: 1,
        format(date) {
          return date.dateIndex.toString();
        },
        style: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white',
          strokeColor: 'black',
          textAlign: 'right',
          textBaseline: 'bottom',
          backgroundColor: '#EEF1F5'
        }
      }
    ]
  },

The effect is as follows:

Outer border

The border of the table may be different in style from the internal grid lines. You can customize the outer border of the Gantt chart through the frame.outerFrameStyle configuration item.

const option = {
  overscrollBehavior: 'none',
  records,
  taskListTable: {
  },
  frame: {
    outerFrameStyle: {
      borderLineWidth: 20,
      borderColor: 'black',
      cornerRadius: 8
    },
  },

The effect is as follows:

Horizontal and Vertical Split Lines

It supports both horizontal split lines for the table header and body, as well as the split line between the left information table and the right task list. Through the frame.horizontalSplitLine configuration item, you can customize the style of the horizontal split line. The frame.verticalSplitLine configuration item allows you to customize the style of the vertical split line.

Marking Lines

In a Gantt chart, it is often necessary to mark some important dates. We configure this effect through the configuration item markLine. The key date is specified through markLine.date, and the style of the marking line can be customized through the markLine.style configuration item. If it is necessary to display this date at initialization, markLine.scrollToMarkLine can be set to true.
For example:

markLine: [
    {
      date: '2024-07-28',
      style: {
        lineWidth: 1,
        lineColor: 'blue',
        lineDash: [8, 4]
      }
    },
    {
      date: '2024-08-17',
      style: {
        lineWidth: 2,
        lineColor: 'red',
        lineDash: [8, 4]
      }
    }
  ],

The effects are as follows:

Container Grid Lines

Through the grid configuration item, you can customize the style of the background grid lines of the task bar on the right. Including background color, line width in the horizontal and vertical directions, line type, etc.
For example:

grid: {
    verticalLine: {
      lineWidth: 3,
      lineColor: 'black'
    },
    horizontalLine: {
      lineWidth: 2,
      lineColor: 'red'
    }
  },

The effects are as follows:

Interaction

Task Bar

The taskBar.moveable configuration item can be used to set whether the task bar is draggable.
The taskBar.resizable configuration item can be used to set whether the task bar is resizable.
The official website example of the corresponding effect: https://visactor.io/vtable/demo/gantt/gantt-interaction-drag-taskBar
For example:

taskBar: {
    startDateField: 'start',
    endDateField: 'end',
    progressField: 'progress',
    // resizable: false,
    moveable: true,
    hoverBarStyle: {
      barOverlayColor: 'rgba(99, 144, 0, 0.4)'
    },
  },

The effects are as follows:

Adjust the width of the left table

By setting frame.verticalSplitLineMoveable to true, the split line can be made draggable.
For example:

frame: {
    outerFrameStyle: {
      borderLineWidth: 1,
      borderColor: '#e1e4e8',
      cornerRadius: 0
    },
    verticalSplitLine: {
      lineColor: '#e1e4e8',
      lineWidth: 1
    },
    horizontalSplitLine: {
      lineColor: '#e1e4e8',
      lineWidth: 1
    },
    verticalSplitLineMoveable: true,
    verticalSplitLineHighlight: {
      lineColor: 'green',
      lineWidth: 1
    }
  },

The effects are as follows:

Full example: https://visactor.io/vtable/demo/gantt/gantt-interaction-drag-table-width

Editing task information

Through the editing capabilities of ListTable, data can be synchronized and updated to the task bar.
First, ensure that the VTable library @visactor/vtable and related editor packages @visactor/vtable-editors have been correctly installed. You can use the following commands to install them:

npm install @visactor/vtable-editors
yarn add @visactor/vtable-editors

Import the required type of editor module in the code:

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

You can also obtain 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>

Currently, the VTable-ediotrs library provides four types of editors, including text input boxes, multi-line text input boxes, date pickers, drop-down lists, etc. You can choose the appropriate editor according to your needs. (The effect of the drop-down list editor is still being optimized, and it is relatively ugly at present.)
The following is an example code for creating an editor:

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

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.
Before using the editor, the editor instance needs to be registered to the VTable:

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

Next, the editor to be used needs to be specified 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 table of the left task list, users can start editing by double-clicking (or other interaction methods) on the cell.
Example of the corresponding effect on the official website: https://visactor.io/vtable/demo/gantt/gantt-edit

More comprehensive editing capabilities can be referred to the editing tutorial of VTable: https://visactor.io/vtable/guide/edit/edit_cell

Adjusting the data order

To enable the drag-and-drop reordering capability, the configuration of the ListTable requires adding rowSeriesNumber in the configuration. With row serial numbers, the style of this column can be configured. To enable reordering, set dragOrder to true. When VTable-Gantt listens to the shift event, it synchronizes the order to the task bar area for display.
For example:

rowSeriesNumber: {
    title: '行号',
    dragOrder: true,
    headerStyle: {
      fontWeight: 'bold',
      color: '#134e35',
      bgColor: '#a7c2ff'
    },
    style: {
      borderColor: '#e1e4e8',
      borderColor: '#9fb9c3',
      borderLineWidth: [1, 0, 1, 0],
    }
  },

The effects are as follows:

Summary

This article details the existing functions of the @visactor/vtable-gantt component. Its basic and extended capabilities can already meet the requirements of the Gantt chart in most current scenarios. The component is still constantly being improved. If you have any suggestions or usage issues, please feel free to communicate.
Welcome to communicate
Finally, we sincerely welcome all friends interested in data visualization to participate in the open-source construction of VisActor:
VChart: VChart Official Website, VChart Github (Thanks for Star)
VTable: VTable Official Website, VTable Github (Thanks for Star)
VMind: VMind Official Website, VMind Github (Thanks for Star)
Official website: www.visactor.io/
Discord: discord.gg/3wPyxVyH6m
Feishu Group (External Network): Open the link and scan the code
Twiter：twitter.com/xuanhun1
github：github.com/VisActor