When building real-world scheduling or project management systems, the hardest part of a Gantt chart is often not the timeline—but the task table and interactions around it.
Jordium GanttChart Vue3 v1.6.0 focuses on improving extensibility, customization, and usability, while keeping backward compatibility for existing projects.
🔑 Key Highlight: Declarative Task Table Columns
Version 1.6.0 introduces declarative Task Table column definitions via the new TaskListColumn component.
Why this matters:
- Clearer and more readable column structure
- Aligns with Vue’s component-based mental model
- Better support for complex columns and business logic
- Easier long-term maintenance and extension
The Task Table is no longer just configuration-driven—it becomes composable UI.
🧩 Task Table with Full Slot Support
To complement declarative columns, the Task Table now supports:
- #header slot for custom headers
- #default slot for custom cell rendering
This allows you to embed:
- Status indicators and icons
- Progress bars and warnings
- Action buttons and menus
- Any custom business component
🖱️ Improved Task Interactions
Drag & Drop in the Task List
- Reorder tasks directly in the list
- Adjust hierarchy and sequence
- Ideal for frequently changing schedules
Visual Dependency Lines on the Timeline
- Add and remove task dependencies visually
- Two-way sync between UI and data
- More intuitive than configuration-only approaches
🌐 uni-app Compatibility
v1.6.0 improves compatibility with uni-app, making it easier to reuse the same Gantt chart across:
- Web / H5
- Mini Programs
- App environments
🎨 Display & Styling Enhancements
- Toggle task icon visibility via TaskListConfig
- Row-level styling support:
- task-list-row-class-name
- task-list-row-style
- Useful for highlighting critical or delayed tasks
🔁 Backward Compatibility
To ensure smooth upgrades:
- task-list-column-render-mode allows switching between
- legacy config-based columns
- new declarative columns
No forced migration required.
🎥 Video Demo
A short demo video showing declarative columns, slots, drag & drop, and dependency lines:
👉 YouTube
🔗 Links
GitHub:
https://github.com/nelson820125/jordium-gantt-vue3
Docs & Live Demo:
https://nelson820125.github.io/jordium-gantt-vue3
📝 Final Thoughts
Jordium GanttChart Vue3 is designed not just to display timelines, but to serve as a foundation for real-world planning and scheduling systems.
If you’re building project management tools, APS systems, or multi-platform scheduling apps with Vue 3, v1.6.0 brings a more scalable and customizable approach.
Feedback and contributions are welcome 🚀
Top comments (0)