vue-gantt-3

English | 中文

A Gantt component for vue3. High performance(global virtual scroll), support time line move and stretch, change the time scale arbitrarily etc. The table part of the component bases on ag-grid.

API & Examples

• Please visit vue-gantt-3

Install

npm install vue-gantt-3

or

yarn add vue-gantt-3

or

pnpm install vue-gantt-3

Usage

Write the following in main.js:

1import { createApp } from 'vue';
2import App from './App.vue';
3import VueGantt3 from 'vue-gantt-3';
4import 'vue-gantt-3/es/vue-gantt-3.css';
5
6const app = createApp(App);
7app.use(VueGantt3);
8app.mount('#app');

Example for App.vue:

1<template>
2  <VueGantt3
3      :getRowId="getRowId"
4      :columns="columns"
5      :rows="rows"
6    ></VueGantt3>
7</template>
8
9<script lang="ts" setup>
10  const getRowId = (rowData) => rowData.id;
11  const columns = ref([
12  {
13    field: 'name',
14    headerName: 'name',
15    resizable: true,
16    cellRendererParams: { expandable: true },
17  },
18  {
19    field: 'displayStartDate',
20    headerName: 'Start Date',
21    resizable: true,
22  },
23  {
24    field: 'displayEndDate',
25    headerName: 'End Date',
26    resizable: true,
27  }
28]);
29const rows = shallowRef([
30   {
31    id: '1',
32    name: 'person 01',
33    displayStartDate: '2025-01-01',
34    displayEndDate: '2025-05-01',
35    timeLines: [{
36      id: '1',
37      startDate: '2025-01-01',
38      endDate: '2025-05-01'
39    }]
40  },
41  {
42    id: '2',
43    name: 'person 02',
44    displayStartDate: '2025-03-01',
45    displayEndDate: '2025-08-01',
46    timeLines: [{
47      id: '2',
48      startDate: '2025-03-01',
49      endDate: '2025-08-01'
50    }]
51  },
52  {
53    id: '3',
54    name: 'person 03',
55    displayStartDate: '2025-05-01',
56    displayEndDate: '2025-12-01',
57    timeLines: [{
58      id: '3',
59      startDate: '2025-05-01',
60      endDate: '2025-12-01'
61    }]
62  }
63]);
64</script>

License

This project is licensed under the MIT License - see the LICENSE.md file for details