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

 (react-datasheet-grid.netlify.app)
2 ポイント 投稿者 GN⁺ 2023-11-13 | 1件のコメント | WhatsAppで共有
  • React Datasheet Grid は、Reactアプリにスプレッドシート型UIを組み込むためのコンポーネントで、状態とカラム定義を接続してデータ入力画面を構成できる
  • 基本的な使い方は、value、onChange、columns を <DataSheetGrid /> に渡す方式で、通常の <input /> より単純なフローを志向している
  • 仮想化アーキテクチャ と最小限のレンダリング最適化により数十万行を扱えるため、大規模テーブルUIに適している
  • 動作、ウィジェット、スタイルを制御できるため、製品要件に合わせた カスタマイズ が可能
  • Excel、Google Sheets、Notion のコピー＆ペースト、キーボードナビゲーション、コンテキストメニュー、選択範囲ドラッグ、アニメーション、TypeScript ベースの実装をサポートしている

React Datasheet Grid 概要

  • React Datasheet Grid は、ReactでスプレッドシートUIを作るためのコンポーネント
  • インストールと配布チャネルとして NPM と GitHub が提供されている
  • 基本的な使用例は、Reactの状態を value と onChange に接続し、columns を渡す方式
    • const [rows, setRows] = useState([])
    • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

使いやすさと性能

  • 開始方法

    • 状態とカラムを接続すればすぐに使える構成
    • ドキュメントとして Getting started が提供されている

  • 大規模データ処理

    • DSG は速度に最適化されており、仮想化アーキテクチャ により数十万行を処理できる
    • レンダリングは最小限に最適化されており、性能をさらに引き出すための performance guides が提供されている

  • カスタマイズ

    • スプレッドシートの動作を制御できる
    • 独自の ウィジェット を実装できる
    • アプリに合わせて DSG の スタイル を変更できる

対応機能とドキュメント

  • Excel、Google Sheets、Notion とのコピー＆ペーストに対応
  • キーボードナビゲーションとショートカットに対応
  • 右クリックとカスタムコンテキストメニューに対応
  • 角のドラッグで選択範囲を拡張できる
  • 滑らかなアニメーションを提供し、TypeScript で実装されている
  • 関連ドキュメントとして Features、Examples、Reference が提供されている

関連記事

1件のコメント

 
GN⁺ 2023-11-13
Hacker News のコメント

  • 機能競争をせず、簡単に拡張できるようにするというプロジェクトの目標は、本当に正しい判断だと思う
    10年以上前、あるプロジェクトで使うデータグリッドコンポーネントを選ぶ必要があったが、顧客は「Excel のような」機能を求めていた
    コンポーネントベンダーが作るべき可能な機能のリストはものすごく長く、「小さな」個別機能だけでも簡単に200個を超え、顧客ごとに求める部分集合が違っていた
    日付/時刻ピッカーのようなコンポーネントも複雑だが、グリッドにかかる期待値はまったく別のレベルだ
    誰も全部はできないのだから、コミュニティに手伝ってもらうという判断はとても賢明だ

    • どんな業界で使っていたプロジェクトだったのか、共有してもらえるか気になる

  • 今週プロジェクトで使い始めた。「各行をダイアログで編集する」インターフェイスをインラインのテーブル編集モードに変える用途で、編集がずっと速くなった
    行の貼り付けなどもできるようになり、デフォルトの状態でもうまく動く
    セルごとにポップオーバーで検証を処理するため、カラムコンポーネントは自分で書いた
    ぶつかった点は2つあった。組み込みのカラムサイズ変更がないことと、ヘッダーやガターをクリックして行/列を選択する機能をオフにしたかったこと
    後者がライブラリに入れるほど一般的な要望なのかは、よく分からない

    • フィードバックありがとう。DSG は基本的なことをできるだけうまくこなし、ユーザーが望むように拡張できるようにしたツールだ
      カラムサイズ変更については長く議論があったが、使いやすいシンプルなツールを作るという方向性とは合わないと思っている
      レスポンシブなカラムサイズ調整の方がより良い妥協案だと感じている
      2つ目のアイデアは実際、簡単に実装できそうだ
    • カラムサイズ変更はかなり一般的な機能なので、おそらく近いうちに追加されるのではないかと思う

  • DataSheetGrid 系のコンポーネントはUX/UI の聖杯のようなものだが、すべての細部を備えるには本当に複雑だった記憶がある
    成功と資金調達を願っている
    Web でもデスクトップでも、基盤となるプラットフォームに関係なく同じことが繰り返されるのを見てきたし、[1] のようなものには良い思い出がある
    [1] https://www.infragistics.com/

    • 同意する。大量の反復的なデータを入力するには、これが最高の UI だと思う
      もちろん、何かを発明したと主張しているわけではない
      温かい言葉をありがとう。オープンソースの資金調達は簡単ではない

  • 初見では良さそうだが、上部の絶えず変わるヒーロー文言が3行と4行の間を行き来して、ページがずっと上下に揺れるので、残りの内容を読むのが少しつらい
    Firefox iOS でそうなる

    • こちらでも同じ問題があり、ページが勝手に上下に跳ねて、とても見づらくてイライラする
      iOS Safari で発生している
    • この問題を知らせてくれた皆さんに感謝。自分では遭遇したことがなく、すぐに直す
    • Firefox iOS では実際には問題なく見える

  • 悪くはないが、Airtable や MUI DataGrid のようなものにある中核機能のいくつかが欠けている。ソート/フィルタリング、行/列の固定、集計行、ピボットなど
    コンセプトは良いので、独自コンポーネントに対するまともなオープンソースの競合をうまく作っていってほしい

    • フィードバックありがとう。DSG は機能で競争するために作ったのではなく、可能な限り最高の UX/UI と拡張性を目指して作ったものだ
      だからそうした部分は自分で実装する必要がある
      理想的には大きな機能ごとに npm パッケージが作られるとよいが、そのためにはプロジェクトがはるかに多くの注目を集める必要がある

  • DataTables はどうなった？ 覚えている人はいる？ あのツールは微妙なのにどこでも使われていたせいで、作者はサポート費用を受け取っていたものだ

    • 今でも使っているし、相変わらずかなり優れている
      作者は10年以上にわたって完全な後方互換性を保ちながらメンテナンスしてきた
      今は React でラップし、その後 React で書き直したが、サーバーエンドポイントを変えたくなかったので通信 API はそのまま維持した
    • 幸い、jQuery と一緒にほとんど後景に退いたようだ

  • 他のセルをクリックしたとき、フォーカス矩形が実際にある位置から別の位置へ移動するように見えるのが気になるのは自分だけだろうか？
    数セル離れたセルをクリックすると、青いフォーカス矩形が新しい対象へ滑っていくのが特によく見える
    Google はこうしない

  • よくできていて見た目も良いが、新しく出てくるものすべてがReact ベースでなければいいのにと思う
    React の複雑な狂気を要求せず、自分のプロジェクトで使える素敵な新しい Web 向けツールはどこで見つけられるのだろう？
    npm で何かをインストールするやり方はあまり好きではない

  • @nick-keller、作ってくれてありがとう。1か月前に知って、かなり有望に見えた
    デフォルトで範囲選択が入っており、一部の代替では有料機能であるうえ、セルもカスタマイズできる
    ただし、これで何を作れるのかを最もよく示している例はランディングページの「customizable」セクションのスクリーンショットだが、実際に可能だと分かるデモがない
    カスタムヘッダーとヘッダーメニューを作ろうとして苦戦したので AG-Grid に移り、範囲選択は自分で実装した

    • もっと例を実装する必要があるのかもしれない。人々を助ける最も効率的な方法はそちらのように思う

  • iOS ではセルへの貼り付けができず、入力はできるようだ
    意図された動作なのかバグなのか気になる
    デスクトップ版では貼り付けできるのか？