OPEN_GRID 가이드

OPEN_GRID는 순수 JavaScript 기반의 경량 데이터 그리드 라이브러리입니다. 복잡한 의존성 없이 어떤 환경에서도 사용할 수 있습니다.

빠른 시작

HTML에 아래 코드를 추가하면 바로 사용할 수 있습니다.

<!-- 스타일시트 -->
<link rel="stylesheet" href="dist/open-grid-base.css">
<link rel="stylesheet" href="dist/open-grid-themes.css">

<!-- 그리드 컨테이너 -->
<div id="myGrid"></div>

<!-- 스크립트 (ESM) -->
<script type="module">
  import OpenGrid from './dist/open-grid.js';

  const grid = new OpenGrid(document.getElementById('myGrid'), {
    columns: [
      { field: 'id',   header: 'ID',   width: 60  },
      { field: 'name', header: '이름', width: 120 },
    ],
    data: [
      { id: 1, name: '김민준' },
      { id: 2, name: '이서연' },
    ],
    height: 300,
  });
</script>

주요 기능

기능	설명	버전
정렬	컬럼 헤더 클릭 정렬, 다중 정렬	v0.1.0
필터	헤더 입력 필터, 조건 필터	v0.1.0
편집	인라인 셀 편집, 다양한 에디터	v0.1.0
페이지네이션	서버/클라이언트 페이징	v0.1.0
고정 컬럼	좌/우 컬럼 고정	v0.1.2
그룹/트리	데이터 그룹핑, 트리 계층	v0.1.2
엑셀 내보내기	.xlsx 파일 생성	v0.1.2
테마	14가지 내장 테마	v0.2.0
FindBar	Ctrl+F 검색 바	v0.2.0
행 드래그	드래그 앤 드롭 순서 변경	v0.2.0
피벗	동적 피벗 테이블	v0.2.0
웹접근성	WCAG 2.2 준수	v0.2.0

설치 방법

CDN (권장)

<!-- v0.2.0 기준 -->
<link rel="stylesheet" href="https://cdn.example.com/open-grid/0.2.0/open-grid-base.css">
<link rel="stylesheet" href="https://cdn.example.com/open-grid/0.2.0/open-grid-themes.css">
<script type="module" src="https://cdn.example.com/open-grid/0.2.0/open-grid.js"></script>

npm (준비 중)

npm install open-grid

직접 다운로드

릴리즈 페이지에서 최신 버전을 다운로드할 수 있습니다.

좌측 메뉴에서 원하는 가이드 항목을 선택하세요.