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:

import { createApp } from 'vue';
import App from './App.vue';
import VueGantt3 from 'vue-gantt-3';

const app = createApp(App);
app.use(VueGantt3);
app.mount('#app');

Example for App.vue:

<template>
  <VueGantt3
      :getRowId="getRowId"
      :columns="columns"
      :rows="rows"
    ></VueGantt3>
</template>

<script lang="ts" setup>
  const getRowId = (rowData) => rowData.id;
  const columns = ref([
  {
    field: 'name',
    headerName: 'name',
    resizable: true,
    cellRendererParams: { expandable: true },
  },
  {
    field: 'displayStartDate',
    headerName: 'Start Date',
    resizable: true,
  },
  {
    field: 'displayEndDate',
    headerName: 'End Date',
    resizable: true,
  }
]);
const rows = shallowRef([
   {
    id: '1',
    name: 'person 01',
    displayStartDate: '2025-01-01',
    displayEndDate: '2025-05-01',
    timeLines: [{
      id: '1',
      startDate: '2025-01-01',
      endDate: '2025-05-01'
    }]
  },
  {
    id: '2',
    name: 'person 02',
    displayStartDate: '2025-03-01',
    displayEndDate: '2025-08-01',
    timeLines: [{
      id: '2',
      startDate: '2025-03-01',
      endDate: '2025-08-01'
    }]
  },
  {
    id: '3',
    name: 'person 03',
    displayStartDate: '2025-05-01',
    displayEndDate: '2025-12-01',
    timeLines: [{
      id: '3',
      startDate: '2025-05-01',
      endDate: '2025-12-01'
    }]
  }
]);
</script>

License

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