記事
React／Vue で Excel ライクなスプレッドシートを構築する — パフォーマンス、数式、xlsx ラウンドトリップ、ReoGrid Web のリリースノートまで。
-
· unvell team編集可能な数式付き Vue 製インボイスを約 60 行で構築する
実用的な Vue 3 製インボイスコンポーネント: 編集可能な数量と単価、数式による行小計の自動計算、SUM、税、合計 — すべてを 1 枚の Canvas バックエンドのスプレッドシートで実現。計算はリアルタイムに更新され、リアクティブな ref が合計値を Vue の UI へミラーします。xlsx エクスポートは 1 回の呼び出しで完結（Pro）。
#vue #tutorial #formula #invoice #spreadsheet -
· unvell teamWeb で Excel ライクな帳票を作る — ブラウザでも Excel の操作感は再現できる
帳票はもう Excel だけではありません。ReoGrid Web を使えば、既存の Excel ファイルをそのままブラウザに読み込んだり、ゼロからコードで構築したり、テンプレートに動的データを流し込んだりと、Web 上で Excel ライクな帳票体験を実現できます。
#tutorial #invoice #spreadsheet #excel #japanese -
· unvell teamReoGrid Web vs AG Grid vs Handsontable — 適切なグリッドの選び方
ReoGrid チームの視点から見た、JavaScript の主要 3 グリッドライブラリの率直な比較。それぞれがどこに向いているか、トレードオフは何か、そしてあなたのプロジェクトに本当に必要なのはどれかを判断するためのガイド。
#comparison #ag-grid #handsontable #spreadsheet #data-grid #react #vue -
· unvell team編集可能な数式付き React 製インボイスを約 60 行で構築する
実用的な React 製インボイスコンポーネント: 編集可能な数量と単価、数式による行小計の自動計算、SUM、税、合計 — すべてを 1 枚の Canvas バックエンドのスプレッドシートで実現。計算はリアルタイムに更新され、ユーザーは xlsx へエクスポート（Pro）できます。
#react #tutorial #formula #invoice #spreadsheet -
· unvell teamブラウザで本物の Excel ファイルをインポートする — アップロードもサーバーも不要
.xlsx ファイルを Web ページにドラッグし、セルのスタイル・結合・罫線・ウィンドウ枠固定・数式を保ったままスプレッドシート UI で描画する。バックエンドも SheetJS も進捗モーダルも不要 — 44 万セルのファイルを 3.7 秒でロードします。
#xlsx #excel #react #vue #file-api #performance -
· unvell teamブラウザで 10,000 行を描画する — ReoGrid Web が 60fps を維持する仕組み
Canvas ベースのスプレッドシートには DOM のボトルネックはありませんが、2D コンテキスト側で千の小さな出血が起きえます。本記事では、ReoGrid Web が行ごとの React 再調整も特殊な仮想化テクニックもなしに、10,000 行の密なシートをジャンクなく描画する方法を解説します。
#performance #canvas #react #vue #spreadsheet -
· unvell teamReoGrid Web v1.2 を発表 — React／Vue 向けの Excel グレードスプレッドシート
ReoGrid Web v1.2 には 109 個の組み込み数式、Excel スタイルの色分け参照編集、オートフィルハンドル、スクロール 1 フレームあたりの Canvas 呼び出し数を約 70% 削減した描画エンジンが含まれます。React／Vue 用ラッパー付きで合計 300KB 未満の単一パッケージです。
#release #v1.2 #react #vue #spreadsheet