📊

Reactで使えるGantt ChartのOSSを簡単に紹介する

2022/09/14に公開

こんにちは,motaです。
今回は、新人研修の一環で、社内ツールの開発を行う関係でその中でReactでGantt Chartを調査しました。調べても全然記事がなかったため、ここにメモ程度に残しておきます。

  • React timeline calender
  • frappe gantt
  • rc-gantt
  • Gantt Task React

React timeline calender

Starred 1.6k , Fork 510 , Latest updated at 2022/05
contributors 47
License : MIT

https://github.com/namespace-ee/react-calendar-timeline

いいところ

ピンチイン・ピンチアウトでカレンダーの拡大縮小・横移動ができる。
サイドバーが使える
いろんな使い方の例がCodeSandboxにある

https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples

微妙なところ

子要素の表示が初学社にとっては難しかった。
APIはあるが、標準でビューモード(日・週・月)の切り替えボタンがない
なんか表示がバグって結局使わなかった。

Frappe Gantt

Starred 3.3k , Fork 739 , Latest updated at 2022/04
contributors 20
License : MIT

https://github.com/frappe/gantt

いいところ

モダンなUIな気がする

微妙なところ

サイドバーがない
React Libraryがあるけど、メンテがされてない

react gantt frappe

Latest update at 2020.
License : MIT ( not sure )

https://github.com/Soremwar/react-frappe-gantt

rc-gantt

Starred 25k , Fork 4 , Latest updated at 2022/09
contributors 2
License : MIT

https://github.com/ahwgs/react-gantt
https://www.npmjs.com/package/rc-gantt

いいところ

サイドバーがある
表示モードのボタンがある ( day / week / year / quater )
今日に戻るボタンがある
DBとの接続が楽だった。
子要素も標準で作れるし、子要素の子要素も可能
結局これを使った。

微妙なところ

中国語のドキュメント
ナレッジがネット上にほとんど落ちてない

Gantt Task React

Starred 287 , Fork 121 , Latest updated at 2022/07
contributors 8
License : MIT

https://github.com/MaTeMaTuK/gantt-task-react
demo : https://matematuk.github.io/gantt-task-react/

まとめ

ネットのどこをググってもあまり情報が落ちていなく、みなさん自作しているのか、そもそもReactでGanttを実装する機会がないのか、JSのライブラリでやっているんですかね? 
簡易的ですが、Gantt Chartを無料でOSSでReactで実装したい方のググりが楽になれば嬉しいと思い執筆しました。

GitHubで編集を提案

Discussion