A01 / CANVAS データグリッド

Acheron Grid.
あなたのデータ。あなたのルール。

ヘッドレスコア、Canvas描画、React・Vueアダプターを備えたオープンソースのTypeScriptデータグリッド。

プレイグラウンドを開く 導入ガイド ↗

MIT ライセンス / TypeScript / 開発プレビュー

TypeScript · Vue 3 · ReactCanvas + DOM の操作10,000 行のライブサンプルMIT · Hao Duong

技術を選ぶ

Vue。React。または TypeScript。

ひとつのエンジン、3 通りの導入方法。

VUE 3

あなたの Vue コンポーネント。

型付き props/ref、ライフサイクルの後処理、テーマ・ビュー・固定領域の更新。

@acheron-grid/vue REACT

あなたの React コンポーネント。

型付き ref とイベント、安定した options、StrictMode 対応のライフサイクル。

@acheron-grid/react VANILLA TYPESCRIPT

自由に導入。

Canvas レンダラーを直接マウント。コアを UI フレームワークから独立させます。

@acheron-grid/canvas

アダプターはソースに含まれます。開発プレビューであり、npm には未公開です。 React・Vue の TypeScript 例 ↗

01 / プレイグラウンド

グリッドのプレイグラウンド

サンプルデータで実際に操作。下の手順を試すか、自由に探索してください。

キーボードガイド

手順付きの 8 種類のデモを探索 ↗

サンプルシート

すべての行

10,000 行 × 13 列

クリックで選択、ダブルクリック/F2 で編集。ヘッダーを右クリックして並べ替え・絞り込み。Alt+Enter でリンクを開きます。ツールバーのショートカットで操作を確認。

セルを選択して開始

変更はこのセッション内のみです。

ロック済み権限で制限固定領域の境界

キーボードショートカット

まずグリッドをフォーカス。エディター内では標準の文字選択と元に戻す操作を使います。

移動 / 選択範囲を拡張
Arrow keys / Shift + Arrow
行 / 列を選択
Shift + Space / Ctrl/Cmd + Space
全選択 / 範囲を追加
Ctrl/Cmd + A / Shift + F8
編集 / 取消
F2 または Enter / Escape
保存 / 保存して移動
Enter / Tab
編集中に改行
Alt + Enter
コピー / 貼り付け
Ctrl/Cmd + C / Ctrl/Cmd + V
元に戻す / やり直す
Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z
太字 / 斜体
Ctrl/Cmd + B / Ctrl/Cmd + I
検索 / コンテキスト操作
Ctrl/Cmd + F / Shift + F10
セル内リンクを開く
Alt + Enter 編集中以外

選択とキーボードの練習 ↗

デモの注意点

各サンプルの 2 行目と AG-00003 の Status は編集不可。選択・コピーは可能です。再読み込みで初期化します。スクリーンリーダーは手動検証が必要です。

02 / 機能

設計の中心は
人々の働き方。

01

複数セルを操作

範囲・行・列を選択。書式のコピー、貼り付け、並べ替え、セル結合、行グループを元に戻せます。

02

文脈を保って編集

複数行テキスト、検索可能な選択肢、タグ、チェックボックス、安全なリッチテキスト、リンク別の操作。保存前に入力を検証。

03

操作体験を調整

固定領域、ガイド付きサイズ変更、ローカルの並べ替え・絞り込み。テーマ、レンダラー、独立した権限を設定。

04

コアの移植性を保つ

純粋な TypeScript がコマンドと履歴を管理。Canvas がブラウザーを担当し、Markdown は任意のアダプターで解析。

03 / 導入

あなたの行。
あなたの出発点。

列を選び、データソースを用意してレンダラーをマウント。保存とサーバー同期はアプリが管理します。

ビルド・導入手順 →
import { LocalDataSource } from '@acheron-grid/core';
import { createGrid } from '@acheron-grid/canvas';

const grid = createGrid({
  container: document.querySelector('#grid'),
  columns: [{ key: 'title', title: 'Title', editable: true }],
  dataSource: new LocalDataSource([
    { id: 1, title: 'Your first row' }
  ], row => row.id)
});

04 / 人とエージェントのための資料

人に読みやすく。
エージェントにも。

Markdown ガイドでパッケージ、実装済み API、拡張点、制限を説明。公開資料を開発支援 AI と共有できます。

独立した MCP アダプターが資料とホスト管理のグリッドツールを提供。ブラウザーのデモには自動接続しません。

はじめにビルド、インストール、マウント、後処理 · ガイド ↗AI 導入の注意点機能、境界、MCP · ガイド ↗資料の目次公開資料の読み順 · 資料を見る ↗

実装済み機能を探索

セルと列だけではありません。

選択とキーボード

キーボードだけでセル・範囲・行を操作。

ライブデモを試す ↗

編集と入力検証

テキスト、検索可能な選択肢、複数タグ、チェックボックスを試す。

ライブデモを試す ↗

リッチテキストとリンク

画面は書式付き、保存は HTML/Markdown。

ライブデモを試す ↗

検索・並べ替え・フィルター

内容を検索し、編集を保持したままローカルビューを変更。

ライブデモを試す ↗

ヘッダー・固定・サイズ変更

階層ヘッダー、固定境界、ガイド付きサイズ変更。

ライブデモを試す ↗

行と列

順序変更・挿入・削除・移動と構造履歴。

ライブデモを試す ↗

セル結合と行グループ

範囲を結合、行グループを折りたたむ。

ライブデモを試す ↗

書式と権限

ユーザーロックとアプリの権限を区別。

ライブデモを試す ↗

セル内の Markdown と HTML

太字、斜体、コード、リンク、改行。HTML は下線にも対応。編集ではソースを隠し、任意の Markdown アダプターでコアの依存を避けます。

リッチテキストを試す ↗

検索できるコンテキストメニュー

右クリックまたは Shift+F10 を押し、入力して操作を絞り込み。選択、コピー、貼り付け、ロック、書式、サイズ、固定、構造変更。ヘッダーでは並べ替え・絞り込みも可能。

メニューとキーボードを試す ↗

各パッケージの資料を読む ↗