跨单元格操作
选择区域、整行和整列。复制样式、粘贴数据、重排、合并单元格和分组行，操作均可撤销。
TypeScript · Vue 3 · ReactCanvas + DOM 交互10,000 行实时示例MIT · Hao Duong
选择技术栈
Vue、React，或原生 TypeScript。
一个引擎，三种集成方式。
适配器已包含在源码中。目前为开发预览，尚未发布到 npm。 React 与 Vue TypeScript 示例 ↗
01 / 交互演示
网格交互演示
使用示例数据体验真实交互。尝试下方操作流程，或自由探索。
示例表格
所有行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 非编辑状态时
演示说明
每个示例的第二行及 AG-00003 的 Status 不可编辑，但仍可选择和复制。刷新会重置数据，屏幕阅读器支持仍需人工验证。
02 / 功能
围绕
人们的工作方式。
结合上下文编辑
多行文本、可搜索选项、标签、复选框、安全富文本和逐链接快捷入口。保存前验证输入。
自定义体验
冻结区域、带引导线的尺寸调整、本地排序和筛选。配置主题、渲染器和独立权限。
保持核心可移植
纯 TypeScript 管理命令和历史，Canvas 负责浏览器交互，Markdown 解析位于可选适配器中。
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、扩展点和当前限制。编码助手可以使用与你相同的公开文档。
独立 MCP 适配器提供文档资源和宿主控制的网格工具；浏览器演示不会自动连接。
探索已实现功能
不止于单元格和列。
选择与键盘
使用键盘操作单元格、区域和整行。
体验实时演示 ↗编辑器与验证
体验文本、可搜索选项、多标签与复选框编辑器。
体验实时演示 ↗富文本与链接
屏幕显示格式化内容，底层存储 HTML 或 Markdown。
体验实时演示 ↗搜索、排序与筛选
查找内容并调整本地视图，同时保留编辑。
体验实时演示 ↗表头、冻结与尺寸调整
多级表头、冻结边界和明确的尺寸调整。
体验实时演示 ↗行与列
支持重排、插入、删除、移动及结构历史。
体验实时演示 ↗合并单元格与行分组
合并区域或折叠行分组。
体验实时演示 ↗格式与权限
区分用户锁定与应用权限。
体验实时演示 ↗单元格中的 Markdown 和 HTML
支持粗体、斜体、内联代码、链接和换行。HTML 还支持下划线。可视编辑隐藏源码，可选 Markdown 适配器使核心不依赖解析器。
体验富文本 ↗可搜索的右键菜单
右键或按 Shift+F10，输入文字筛选操作。支持选择、复制、粘贴、锁定、格式、调整尺寸、冻结及结构变更，表头菜单还提供排序和筛选。
体验菜单与键盘操作 ↗