zhangdaiscott / gantt

An easy-to-use Gantt component. 持续更新，中文文档

XGantt

[English] [中文]

A high-performance vue gantt component for vue3.

• vue2 version is HERE

Important

This repo is pervious jz-gantt. Only vue3 version. If you have used jz-gantt before, you should read the following section carefully.

Specification:

This version 1.0.1 is correspond to jz-gantt@1.3.1. And jz-gantt is archived.

How to migrate

1. package name changesd @xpyjs/gantt replaced jz-gantt.
2. All j- or J prefixes update to x- or X.

Beyond that, no other action is required.

Snipaste

What is XGantt

• Automatically generate gantt charts based on dates
• Support for multi-layer expanding
• High-performance
• Multi-layer linkage
• Multistage selected
• Custom table column content
• Custom gantt row content
• Custom header content
• Dynamic update data
• Custom any style
• Support dark model
• Multiple date display modes switch
• More

Document

For resource code, see Github

For more detailed documentation, see document web

For example, see Example web

If you has any problem, please issue.

How to use

install

npm install @xpyjs/gantt --save

// or
yarn add @xpyjs/gantt

use

import XGantt from "gantt";
import "@xpyjs/gantt/dist/index.css";

createApp(App).use(XGantt).mount('#app')

Basic use

Data should be Array type, index, startDate, endDate and children are supposed in data item, they help to display the data correctly. Each field can be customized.

const dataList = [
    {
        index: 1,
        startDate: "2020-06-05",
        endDate: "2020-08-20",
        ttt: {
            a: "aaa",
            b: "bbb"
        },
        name: "mydata1",
        children: [] // children is required. If no child, empty array is ok.
    },
    {
        index: 2,
        startDate: "2020-07-07",
        endDate: "2020-09-11",
        ttt: {},
        name: "mydata2",
        children: [
            {
                index: 3,
                startDate: "2020-07-10",
                endDate: "2020-08-15",
                ttt: {
                    a: "aaa"
                },
                name: "child1",
                children: [] // children is required. If no child, empty array is ok.
            }
        ]
    }
];

<x-gantt
    data-index="index"
    :data="dataList"
/>

Use table column

We provide a slot named XGanttColumn. Label is required, and it should match data key.

label is required, and it should match data key. label's value should correspond to the name of the field in 'data' (deep query support), which tells the component to render the column.

<x-gantt
    data-index="index"
    :data="dataList"
>
    <x-gantt-column label="name" />
</x-gantt>

Use gantt slider

We provide a slot named XGanttSlider.

Only one slider whill be rendered. If you insert more than one slider, only last slider will be display.

<x-gantt
    data-index="index"
    :data="dataList"
>
    <x-gantt-slider />  <!-- no render -->
    <x-gantt-slider />  <!-- will be rendered -->
</x-gantt>

License

MIT