Open Source · MIT License · Free Forever

OPEN_GRID

순수 TypeScript로 만든 고성능 데이터 그리드 라이브러리.
누구나 무료로 사용할 수 있습니다.

⚡ 라이브 데모 📖 개발자 가이드

기능 데모 섹션

지원 프레임워크

244

단위 테스트

106kb

코어 번들 크기

내장 테마

주요 기능

엔터프라이즈 수준의 기능을 오픈소스로.

🚀

가상 스크롤

수십만 행도 60fps. rAF 기반 최적화.

✏️

인라인 편집

더블클릭 편집, 실행취소(Ctrl+Z), 변경 추적.

🌳

그룹 & 트리

다중 필드 그룹핑·소계, 트리 구조 한 줄 설정.

📊

피벗 & 집계

행/열/값 자유 설정 교차 집계 피벗 테이블.

📤

내보내기

Excel · CSV · JSON · 인쇄 코드 한 줄.

🎨

12가지 테마

다크·오션·포레스트 등 CSS 변수 커스터마이징.

💹

SAP 연동

6종 전표(FB70·F-53 등) BAPI JSON 페이로드.

🔒

데이터 마스킹

주민번호·카드번호·이메일 10종 마스킹 내장.

5개 프레임워크 지원

하나의 라이브러리로 모든 환경에서.

⚛️

React 18

Hooks 기반 함수형 컴포넌트

💚

Composition API 반응형

🔷

jQuery

jQuery 3.7 이벤트 위임

⚡

Vanilla JS

의존성 제로 코어

🔴

AngularJS

ng-controller 방식

다운로드

ZIP 하나로 오프라인에서도 사용. MIT 라이선스, 완전 무료.

⬇ open-grid-v0.1.2.zip 다운로드

포함: open-grid.js · open-grid-react.js · open-grid-vue.js · style.css · TypeScript 타입

📖 개발자 가이드 ⚡ 라이브 데모

빠른 시작

다운로드 후 3분이면 첫 그리드 완성.

<link rel="stylesheet" href="./open-grid/style.css">


        import
         { OpenGrid }
         from
         './open-grid/open-grid.js';


        const
         grid
         =
         new
         OpenGrid('#container', {

          columns: [{ field: 'name', header: '이름', width: 120 }],

          height: 400,

        });

        grid.setData(rows);

npm도 지원합니다: npm install open-grid