📗
Reactベースのスプレッドシートのようなライブラリを作った話
あけましておめでとうございます🎍
Zennに書くのは初めてなのでお手柔らかにお願いします🙏
最近 お金がもらえる とても良いプラットフォームがあると聞いたのでこちらに書いてみることにしました👻
冗談はさておき、スプレッドシート便利ですよね。
こんなに便利なものなのでWebアプリケーションにも組み込みたいくらいなんですが、要望を満たしてくれるような高機能なライブラリはだいたい有料です😢
かねてより使いたいと思っていたHandsontableも有料版だけになってしまいました🥺
というわけで文句ばっか言っていても始まらないので自分で作ってみることにしたというのが事の経緯です。
デモ
で、出来上がったのがこちらです🤲
CodeSandboxからStackblitzに変えました(少し遅い)
そのほかのサンプルは こちら
機能
ショートカットキーについては以下をサポートしてます👀
- 全選択(Ctrl+a)
- コピー(Ctrl+c)
- 切り取り(Ctrl+x)
- ペースト(Ctrl+v)
- Undo(Ctrl+z)
- Redo(Ctrl+Shift+z or Ctrl+r)
- 検索(Ctrl+f)
- 保存(Ctrl+s)
- onSaveに指定したコールバック関数を呼び出す
(あと右クリックでメニューが開きます)
また、 Renderer という仕組みによってセルの表示を変えられます。
特定の行、特定の列、特定のセルだけに Renderer やスタイルをあてられる作りにしました。
「行、列の追加」、「数式のサポート」はこれからです。一段落してきた雰囲気があるのでユニットテストもそろそろ書きます。
詳細についてはドキュメントを参照ください。
気になった方はぜひスターしてください⭐️ 泣いて喜びます🤣😂😭！！
今回使った技術は TypeScript, React, Redux(Toolkit) です。もし反響があれば技術解説記事とかも書いてみようと思います😇
Discussion