なんかデータをたくさん表示するUIって、動きがモッサリしがちじゃない？😳
わたしも前に「これさくさく動いてくれたらなあ…」って思ったことあるんだよね💭
そんな悩みを33ヶ月もかけてがんばって作り直したっていうReactのデータグリッド「LyteNyte Grid」の話、今日はしてみるよ✨
完全にカスタマイズ自由！「ヘッドレス設計」って何？
LyteNyte Gridはヘッドレス設計っていうスタイルをとってるんだって。
これ、簡単に言うと「グリッドの中身は自分で組み立ててね！」って感じの自由さ✨
具体的には…
- Reactのパーツを自分で組み合わせて作れるから、UIや動きも好きに変えられる🥳
- TailwindでもCSS ModulesでもEmotionでも、好きなスタイリング方法でOK👌
- イベントの設定や参照もめんどくさい裏側の処理ナシでサクッとできる🎀
- もちろん「魔法みたいな動き」じゃなくて、全部Reactの普通の仕組みで組めるから分かりやすい✨
もし「そんなにカスタムめんどくさいよ～」って人も安心して。
テーマ（見た目のセット）も用意してあって、クラス名1つ付けるだけで使えるんだって！💗
サイズがだいぶ軽くなったってマジ？
うれしいことに、今回のバージョン1でパッケージのサイズが約半分に減ったんだよ！😮💨
- Core版はなんと36kbくらい（ソート、フィルター、仮想化など基本機能ぜんぶ入り！）
- PRO版は49kbほどで、高度なピボットやツリーデータ、サーバー連携もできちゃう
これだけコンパクトなら、読み込みも速くなるし、他のライブラリとの相性も良さそうだよね🌸
もっと速くなった！10,000回の更新も余裕です
元々速かったLyteNyte Gridがさらにチューンアップ💨
レンダリングの最適化やキャッシュ改善で、負荷がかかってもレスポンスが遅くならないようにしたらしい。
そのほかの変化も気になる！
- TypeScriptのサポートがさらにしっかりして、書きやすくなった💡
- APIの呼び出しがわかりやすく、関数もシンプルに✨
- パッケージのエクスポート整理や不要コード除去（ツリーシェイキング）にも対応
こういう「開発者目線での使いやすさ向上」も忘れてないのが好印象だよね👍
無料で使えるオープンソースのReact用データグリッド、興味あるなら試してみるのおすすめ💭
わたしも触ってみたけど、コードの中身が見えるから「なんか怪しい黒箱じゃないんだ～」って安心感あったよ✨
もし気に入ったらGitHubでスターやフィードバックもぜひ！
GitHub
Live Demo
はてな
コメント
クリス
パフォーマンス重視で仮想化は好きだけど、JestのユニットテストでAg Gridがうまく動かなくて困ってる。 JSDom環境でどう動くんだろう？
ハンナ
フレームワークに依存しないといいのに。
ハンナ
「遅いUIをこう直しました」「今は速くなりました」ってだけで、どんな最適化したのか詳しく聞きたかったな。 説得力ほしい。
ベン
すごくキレイ。 バニラJS版はある？
レオ
いいね。
ロバート
見た目かなりいいね。 KendoUIと比べてどんな強みがあるの？
ロバート
スタートアップ向けに期間限定や収益条件付きのプロライセンスがあると、早く安心して使いやすいと思う。
レオ
v1リリースおめでとう！ デモ少し触ったけど、いくつか機能は対応済みだけど無効化されてる感じだね。 マルチ選択や中クリックパンとか細かい動きもドキュメントにあるけどデモにはないのが残念。 全体的には「高頻度取引」と「注文管理」のサンプルが特に良かったよ。 応援してる！
サラ
アクセシビリティはまだまだ課題ありそう？
クリス
基本的にReactはできるだけ外してるってことだね。
ベン
デモすごく良かったけど、サーバーサイドのエクスポートには対応してる？
グレース
Pro機能はコードに組み込まれてるの？ それとも自分で持ち込める仕組み？
ジャック
セルの値編集はできる？
ハンナ
「遅いUIをこう直しました」って言うけど、技術的な説明ゼロでただのマーケティングに感じた。
