OPEN_GRID — 고성능 데이터 그리드

무엇을 하시겠어요?

라이브 데모로 기능을 직접 체험하거나, 개발 가이드로 바로 시작해보세요.

라이브 데모

5개 프레임워크(Vanilla JS · Vue 3 · React 18 · jQuery · AngularJS)에서 31가지 기능을 직접 조작해볼 수 있는 인터랙티브 데모입니다. 그리드 정렬, 필터, 편집, 내보내기, SAP 전표처리까지 모두 체험해보세요.

기본 그리드 그룹핑 트리 셀 병합 드래그&드롭 SAP 전표처리

데모 보러 가기

개발 가이드

코딩이 처음인 분도 따라할 수 있는 단계별 가이드입니다. 설치부터 컬럼 설정, 데이터 바인딩, 이벤트 처리, SAP 전표처리까지 31개 챕터로 하나씩 배워보세요.

설치 방법 컬럼 설정 이벤트 편집 내보내기 SAP 전표처리

가이드 시작하기

프레임워크별 데모

사용하는 프레임워크를 선택해서 바로 데모를 확인하세요.

⚡

Vanilla JS

순수 TypeScript
의존성 제로 코어

31 섹션 💚

Composition API
반응형 컴포넌트

AngularJS 1.8
ng-controller 방식

31 섹션

주요 기능

엔터프라이즈 그리드에 필요한 기능을 모두 담았습니다.

🚀

가상 스크롤

수십만 행도 끊김 없이 부드럽게 스크롤됩니다. rAF 기반 최적화로 60fps를 유지합니다.

✏️

인라인 편집

셀 클릭/더블클릭으로 바로 수정, 실행 취소/다시 실행(Ctrl+Z/Y) 지원, 변경 추적 기능.

🌳

그룹 & 트리

다중 필드 그룹핑과 소계, 부모-자식 트리 구조를 간단한 옵션 하나로 설정합니다.

📊

피벗 & 집계

행/열/값 필드를 자유롭게 설정해 교차 집계 피벗 테이블을 만들 수 있습니다.

📤

내보내기

Excel(xlsx) · CSV · JSON 내보내기와 인쇄를 코드 한 줄로 처리합니다.

🎨

12가지 테마

다크, 오션, 포레스트, 선셋 등 내장 테마와 CSS 변수로 자유롭게 커스텀합니다.

♿

접근성 (WCAG 2.2)

ARIA 속성, 키보드 내비게이션, 고대비 색상으로 장차법 기준을 충족합니다.

🗺️

지도 연동

Leaflet/OSM, Google Maps, 카카오/네이버 지도와 행 클릭 연동을 지원합니다.