A01 / CANVAS 데이터 그리드

Acheron Grid.
당신의 데이터. 당신의 규칙.

헤드리스 코어, Canvas 렌더링, React 및 Vue 어댑터를 갖춘 오픈 소스 TypeScript 데이터 그리드.

플레이그라운드 열기 통합 가이드 ↗

MIT 라이선스 / TypeScript / 개발 미리보기

그림 01 / 인터랙션 화면라이브 미리보기

#코드제목상태

1DEMO-001Lorem ipsum사용 가능

2DEMO-002Dolor sit amet사용 가능

3DEMO-003Consectetur대기 중

4DEMO-004Adipiscing elit사용 가능

5DEMO-005Sed do eiusmod대기 중

표 잠김선택과 복사는 계속 가능합니다.

Lorem ipsum

▸ 3개 행 그룹화

Lorem ipsum
Dolor sit amet

디자인 콘텐츠 검토

제목 ↓ A–Z

사용 가능3 / 5

↔ 160 px

Lorem ipsum Dolor sit amet링크

범위 선택라이브 데모 체험 ↗

TypeScript · Vue 3 · ReactCanvas + DOM 인터랙션10,000행 라이브 샘플MIT · Hao Duong

기술 스택 선택

Vue, React 또는 순수 TypeScript.

하나의 엔진, 세 가지 통합 방식.

당신의 Vue 컴포넌트.

타입이 지정된 props와 refs, 수명 주기 정리, 테마·뷰·고정 영역의 실시간 갱신.

@acheron-grid/vue REACT

당신의 React 컴포넌트.

타입이 지정된 refs와 이벤트, 안정적인 options, StrictMode 수명 주기 지원.

@acheron-grid/react 순수 TYPESCRIPT

원하는 방식으로 통합하세요.

Canvas 렌더러를 직접 마운트하고 코어를 UI 프레임워크와 독립적으로 유지하세요.

@acheron-grid/canvas

어댑터는 소스에 포함되어 있습니다. 개발 미리보기이며 npm에 게시되지 않았습니다. React 및 Vue TypeScript 예제 ↗

단계별 안내가 있는 8개 데모 살펴보기 ↗

샘플 시트

모든 행

10,000행 × 13열

셀을 선택해 시작하세요

변경은 현재 세션에만 유지됩니다.

잠김권한 제한고정 영역 경계

관리자: 서식 잠금

키보드 단축키

먼저 그리드에 포커스를 두세요. 편집기에서는 기본 텍스트 선택과 실행 취소를 유지합니다.

이동 / 선택 확장: 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 파싱은 선택 어댑터로 분리됩니다.

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 / 사람과 에이전트를 위한 문서