VTable-Gantt
VTable-Gantt create an efficient and flexible Gantt chart solution to make project management easier. Through simple configuration and custom layout, you can quickly get started and meet various complex needs. Improve team collaboration efficiency and achieve transparency of project progress.
Introduction •
Demo •
Tutorial •
API•
Introduction
VTable-Gantt is a Gantt chart component library in the VisActor visualization system, based on the table component VTable and the visualization rendering engine VRender. It is designed specifically for project management and task tracking, providing powerful visualization and interaction features. The core capabilities are as follows:
- High performance: Supports fast computation and rendering of large-scale project data, ensuring a smooth user experience.
- Flexible layout: Supports custom timeline, task bar styles, and layouts to meet different project management needs.
- Powerful interaction: Provides drag-and-drop, zoom, and edit functions for tasks, simplifying project management operations.
- Rich visualization capabilities: supports custom rendering of information cells and task bars, provides tree structure display, and improves the diversity and intuitiveness of data display.
Repo Intro
This repository includes the following packages:
- packages/vtable: The core code repository of VTable
- packages/vtable-gantt: Gantt chart component code
- packages/vtable-editors: Table editor component code
- packages/vtable-export: Table export tool code
- packages/vtable-search: Table search tool code
- packages/react-vtable: React version of the table component
- packages/vue-vtable: Vue version of the table component
- docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.
Usage
Installation
npm package
// npm
npm install @visactor/vtable-gantt
// yarn
yarn add @visactor/vtable-gantt
Quick Start
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'
},
{
id: 3,
title: 'Task 3',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-08-04',
end: '2024-08-04',
progress: 100,
priority: 'P1'
},
{
id: 4,
title: 'Task 4',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-26',
end: '2024-07-28',
progress: 31,
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(CONTAINER_ID), option);
More demos and detailed tutorials
Related Links
Ecosystem
Contribution
If you would like to contribute, please read the Code of Conduct 和 Guide first。
Small streams converge to make great rivers and seas!
License
MIT License
