HN紹介: Airtable形式のReactコンポーネント、DataSheetGrid

React Datasheet Grid の紹介

• React Datasheet Grid は Airtable に似た React コンポーネントで、美しいスプレッドシートを作成可能。
• 技術チームやプロダクトチームが、より高品質な製品をより迅速にリリースし、コンバージョン率を改善できるよう支援する Tggl.io とのパートナーシップ。
• 使い方は簡単で、状態を接続するだけでよい DataSheetGrid コンポーネントを提供。

使いやすさ

• React Datasheet Grid は <input /> よりも使いやすい。
• useState を使ってスプレッドシートの行状態を管理し、変更可能。

パフォーマンス

• 仮想化アーキテクチャにより、数十万件の行を簡単に処理できるよう最適化された速度。
• 最小限のレンダリングでパフォーマンスを最適化し、パフォーマンスガイドに従って DSG の最大性能を活用可能。

カスタマイズ性

• スプレッドシートのあらゆる動作を制御でき、独自ウィジェットの実装や DSG スタイルのアプリ向けカスタマイズが可能。

機能の豊富さ

• Excel、Google Sheets、Notion などからのコピー＆ペーストをサポート。
• キーボードナビゲーションとショートカットを完全サポート。
• 右クリックおよびカスタムコンテキストメニューをサポート。
• 選択範囲拡張のための角ドラッグをサポート。
• 滑らかなアニメーション。
• Typescript で構築。

GN⁺の意見

React Datasheet Grid の重要な点は、使いやすさ、優れたパフォーマンス、カスタマイズ性、そして多様な機能を備えていること。 このコンポーネントは、開発者がスプレッドシート機能を迅速かつ効率的に実装できるようにし、ユーザー体験の向上と製品開発時間の短縮に貢献しうる。 こうした理由から、ソフトウェア開発者にとって非常に興味深いツールとなり得る。

[GN⁺]

Hacker Newsの意見

• プロジェクトの目標が機能競争ではなく、拡張のしやすさの提供に重点を置いているのは非常に賢明な判断だ。

  • 過去のプロジェクトで、顧客が求める「Excelのような」機能を備えたデータグリッドコンポーネントを選ばなければならなかった経験を思い出した。無数の細かな機能があり、各顧客が必要とする機能の部分集合は異なっていた。
  • 多くのコンポーネントは複雑だが、グリッドに対する期待はまったく別次元だ。
  • すべてを一人で実現できる人はいないので、コミュニティの助けを借りるのは賢いやり方だ。

• 今週、プロジェクトで「各行をダイアログで編集する」インターフェースをインラインのテーブル編集モードに置き換えて使い始めた。特に手を加えなくてもそのままうまく動作し、各セルでポップオーバーを使ったバリデーションを処理する独自のカラムコンポーネントも書いた。

  • カラムのサイズ変更機能は内蔵されていない（ただし利用上の大きな問題ではない）。
  • ヘッダーやガターをクリックして行や列を選択する機能を無効化したかった。ライブラリに組み込むほど一般的なニーズではないのかもしれない。

• DataSheetGridコンポーネントはUX/UIの聖杯と見なされがちだが、あらゆる細部を含めようとすると本当に複雑になる。成功と資金調達を心から祈る。Webでもデスクトップでも、基盤となるプラットフォームを超えて同じ話が繰り返されるのを目にしてきた。

• このコンポーネントは良さそうだが、AirtableやMUI DataGridのようなものにあるいくつかの主要機能（並べ替え/フィルタリング、行/列の固定、集計行、ピボットなど）が欠けている。

  • それでも良いコンセプトであり、適切なOSS競合を構築できることを祈る。

• 一見するとすばらしく見えるが、ページ上部の絶えず変化するヒーローテキストのせいでページが上下に揺れてしまい、残りを読むのが難しい。（iOSのFirefoxで）

• DataTablesに何が起きたのか覚えている人はいる？ あのツールはひどい出来だったのに広く使われていて、作者はサポートに対して料金を請求していた。

• 他のセルをクリックしたときに、フォーカスの四角形が実際にある場所から別の場所へ移動していく見え方が気になる。数セル離れた場所をクリックすると、青いフォーカス枠が新しい位置へ素早く移動するのが見える。Googleはこうしていない。

• このコンポーネントは本当にすばらしく見えるし、1か月前に必要だった。試してみるつもりだ。

• iOSではセルへの貼り付けができないが、入力はできる。これは意図された動作なのか、それともバグなのか？ デスクトップ版では貼り付け可能なのか？

• @nick-keller に感謝。1か月前にこれを見つけたが、とても有望に見える。範囲選択が標準で可能であり（代替ソリューションの中にはプロ向け機能のものもある）、セルをカスタマイズできる。ただし、それが実際に可能であることを示すデモがなく、「カスタマイズ可能」セクションのランディングページでも最良の例がスクリーンショットで示されているだけだった。カスタムヘッダーやヘッダーメニューを作るのに苦労し、AG-Gridに移って独自の範囲選択を実装した。