Thao tác trên nhiều ô
Chọn vùng, cả hàng và cột. Sao chép định dạng, dán dữ liệu, đổi thứ tự, gộp ô và nhóm hàng với các thao tác có thể hoàn tác.
A01 / BỘ MÁY BẢNG DỮ LIỆU CANVAS
Acheron Grid.
Dữ liệu của bạn. Quy tắc của bạn.
Bảng dữ liệu TypeScript mã nguồn mở với core độc lập giao diện, renderer Canvas và adapter React, Vue.
Giấy phép MIT / TypeScript / Bản phát triển
TypeScript · Vue 3 · ReactTương tác Canvas + DOMDemo trực tiếp 10.000 dòngMIT · Hao Duong
CHỌN CÔNG NGHỆ CỦA BẠN
Vue. React. Hoặc TypeScript thuần.
Một bộ máy, ba cách tích hợp vào ứng dụng.
Adapters đã có trong mã nguồn. Đây là bản phát triển; packages chưa được phát hành lên npm. Ví dụ TypeScript cho React & Vue ↗
01 / BẢNG TƯƠNG TÁC
Bảng tương tác
Tương tác thật với dữ liệu mẫu. Thử các quy trình bên dưới hoặc tự khám phá.
Khám phá 8 demo riêng với hướng dẫn từng bước ↗
Bảng mẫu
Tất cả dòng10.000 dòng × 13 cột
Bấm để chọn, bấm đúp hoặc F2 để sửa. Bấm phải header để sort/filter. Alt+Enter mở liên kết. Xem Phím tắt trên toolbar để được hướng dẫn.
Chọn một ô để bắt đầu
Thay đổi chỉ lưu trong phiên này.
Đã khóaBị giới hạn quyềnRanh giới vùng cố định
Phím tắt
Focus vào bảng trước. Editor giữ cách chọn văn bản và undo mặc định.
- Di chuyển / mở rộng vùng chọn
- Arrow keys / Shift + Arrow
- Chọn hàng / cột
- Shift + Space / Ctrl/Cmd + Space
- Chọn tất cả / thêm vùng
- Ctrl/Cmd + A / Shift + F8
- Sửa / hủy
- F2 hoặc Enter / Escape
- Lưu / lưu và chuyển ô
- Enter / Tab
- Xuống dòng khi sửa
- Alt + Enter
- Sao chép / dán
- Ctrl/Cmd + C / Ctrl/Cmd + V
- Hoàn tác / làm lại
- Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z
- Đậm / nghiêng
- Ctrl/Cmd + B / Ctrl/Cmd + I
- Tìm / mở menu thao tác
- Ctrl/Cmd + F / Shift + F10
- Mở liên kết trong ô
- Alt + Enter khi không đang sửa
Ghi chú demo
Dòng thứ hai của mỗi dataset chỉ đọc; Status của AG-00003 cũng không cho sửa. Vẫn chọn và sao chép được. Tải lại sẽ đặt lại dữ liệu. Trợ năng screen reader cần kiểm chứng thủ công.
02 / TÍNH NĂNG
Thiết kế theo
cách mọi người làm việc.
Chỉnh sửa có ngữ cảnh
Văn bản nhiều dòng, lựa chọn có tìm kiếm, thẻ, checkbox, rich text an toàn và nút mở từng liên kết. Kiểm tra đầu vào trước khi lưu.
Tùy chỉnh trải nghiệm
Cố định vùng, resize có đường hướng dẫn, sort và filter dữ liệu local. Cấu hình theme, renderer và từng quyền độc lập.
Giữ core linh hoạt
TypeScript thuần quản lý commands và history. Canvas xử lý trình duyệt. Parse Markdown nằm trong adapter tùy chọn.
03 / TÍCH HỢP
Dữ liệu của bạn.
Điểm bắt đầu của bạn.
Chọn cột, cung cấp data source và mount renderer. Ứng dụng của bạn quản lý lưu trữ và đồng bộ server.
Hướng dẫn build và tích hợp →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 / TÀI LIỆU CHO NGƯỜI VÀ AI
Dễ đọc cho mọi người.
Sẵn sàng cho AI.
Hướng dẫn Markdown mô tả packages, API đang hoạt động, điểm mở rộng và giới hạn hiện tại. Cho trợ lý lập trình dùng cùng tài liệu public với bạn.
MCP adapter riêng cung cấp tài liệu và công cụ grid do host kiểm soát; playground trên trình duyệt không tự kết nối.
KHÁM PHÁ CÁC TÍNH NĂNG ĐÃ CÓ
Không chỉ là hàng và cột.
Chọn vùng & bàn phím
Thao tác với ô, vùng và cả hàng bằng bàn phím.
Thử demo trực tiếp ↗Soạn thảo & kiểm tra dữ liệu
Thử text, lựa chọn có tìm kiếm, nhiều thẻ và checkbox.
Thử demo trực tiếp ↗Văn bản định dạng & liên kết
Nội dung có định dạng trên màn hình, HTML/Markdown để lưu trữ.
Thử demo trực tiếp ↗Tìm kiếm, sắp xếp & lọc
Tìm nội dung, tạo view local và giữ nguyên chỉnh sửa.
Thử demo trực tiếp ↗Tiêu đề, cố định & kích thước
Header nhiều cấp, ranh giới freeze và thay đổi kích thước có chủ đích.
Thử demo trực tiếp ↗Hàng & cột
Đổi thứ tự, chèn, xóa, move với history cấu trúc.
Thử demo trực tiếp ↗Gộp ô & nhóm hàng
Gộp vùng hoặc thu gọn nhóm hàng.
Thử demo trực tiếp ↗Định dạng & quyền
Phân biệt khóa người dùng với quyền ứng dụng.
Thử demo trực tiếp ↗Markdown và HTML trong ô
In đậm, nghiêng, code, liên kết và xuống dòng. HTML còn hỗ trợ gạch dưới. Editor ẩn mã nguồn; Markdown adapter tùy chọn giữ core không phụ thuộc parser.
Thử nội dung có định dạng ↗Menu chuột phải có tìm kiếm
Bấm chuột phải hoặc Shift+F10, rồi gõ để lọc thao tác. Chọn, sao chép, dán, khóa, định dạng, resize, cố định và đổi cấu trúc. Menu header còn có sort và filter.
Thử menu và bàn phím ↗