記事
React／Vue で Excel ライクなスプレッドシートを構築する — パフォーマンス、数式、xlsx ラウンドトリップ、ReoGrid Web のリリースノートまで。
-
· unvell teamReoGrid Web v1.3 を発表 — マルチシートワークブックとクロスシート数式
ReoGrid Web v1.3 はグリッドを N 枚のワークシートからなるワークブックに進化させます — 標準のシートタブバー、シートごとの Undo、ワークブック全体の xlsx/JSON 入出力、そして =Sheet1!A1 のようなクロスシート数式参照。公開 API に破壊的変更はありません。
#release #v1.3 #multi-sheet #workbook #spreadsheet -
· unvell teamチェックボックス・ドロップダウン・進捗バー ― セルタイプで「動く勤怠管理表」をWebに作る
Excel業務シートの☑チェックや選択リストを、HTMLフォームで作り直さずWebへ。ReoGrid Web の組み込みセルタイプ8種（checkbox・dropdown・progress・rating・sparkline 等）で勤怠管理表を組み立てる実装ガイド。実コード付き。
#cell-types #checkbox #dropdown #spreadsheet #attendance #ui -
· unvell teamブラウザのスプレッドシートで 100 万行 — 100 万行をロードせずに
3週間前、私たちは「100万行はスコープ外」と書きました。考えを変えました。遅延ロード・データソースの紹介です — スクロールバーは 1,000,000 行を表しながら、グリッドが保持するのは実際に見えている数百行だけ。
#performance #big-data #lazy-loading #spreadsheet #javascript -
· unvell team脱・神Excel ― 方眼紙でつくった帳票を、作り直さずWebアプリにする
「神Excel」「方眼紙Excel」でつくった見積書・請求書などの帳票をWeb化する、2つの現実的な方法 ― 既存の .xlsx をそのまま読み込む／コードで組み立てる。結合セル・罫線・円書式・和暦まで、ブラウザだけで。実コード付き。
#excel #xlsx #forms #invoice #spreadsheet #merged-cells -
· unvell teamAngularでReoGridを使う — ラッパー不要のExcelライクなスプレッドシート
ReoGrid Web は React と Vue のラッパーを提供していますが、コアはフレームワーク非依存です。Angular アプリに、編集・数式・xlsx 読み込みを備えたキャンバスベースのスプレッドシートを約30行で組み込む方法を紹介します。
#angular #spreadsheet #data-grid #excel #typescript -
· unvell teamJavaScript で Excel ファイルを読み書きする — インポート・エクスポート・JSON
.xlsx ファイルをブラウザに読み込み、グリッドを Excel に書き出し、xlsx と JSON を相互変換する方法 — すべてクライアントサイドで、スタイルと書式を保持したまま。ReoGrid Web の実用コード付き。
#excel #xlsx #import #export #json #javascript -
· unvell teamReoGrid .NET から ReoGrid Web へ — スプレッドシートをブラウザに持ち込む
WinForms や WPF で ReoGrid を使ったことがあるなら、Web 版はすぐ馴染みます。同じ Excel ライクなモデル、同じ xlsx 再現性が、React・Vue・バニラ JS で。何が引き継がれ、何が変わり、どう橋渡しするかを解説します。
#dotnet #winforms #wpf #migration #spreadsheet #web - · unvell team
ReoGrid Web vs Luckysheet vs x-spreadsheet — JavaScript スプレッドシートの選び方
キャンバス/スプレッドシート系の3つの JS ライブラリ — Luckysheet、x-spreadsheet、ReoGrid Web — を、描画方式・xlsx 再現性・メンテナンス・ライセンス・適したプロジェクトの観点で実用的に比較します。
#comparison #luckysheet #x-spreadsheet #spreadsheet #open-source #canvas -
· unvell teamReact で作るオンライン XLSX ビューア — ファイルはブラウザの外に出ない
「xlsx viewer online」で出てくるツールの多くは、あなたのスプレッドシートを自分の管理外のサーバーへアップロードします。ここで紹介するのは、.xlsx を完全にブラウザ内で開く React コンポーネント — 読み取り専用で、スタイル・結合・数式を保持。アップロードもバックエンドもアカウントも不要です。
#xlsx #excel #react #viewer #file-api -
· 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 用ラッパー付きで約 100KB（min+gzip）の単一パッケージです。
#release #v1.2 #react #vue #spreadsheet