foxnail

AI로 고쳐 쓰는 무료 웹 그리드, OPEN_GRID 0.4.0 릴리즈 노트

2026. 06. 20  ·  OPEN GRID

OPEN_GRID 0.4.0 을 공개합니다. 이번 릴리스의 주인공은 단연 그리드와 그리드 사이로 데이터를 옮기는 기능입니다.
한 그리드의 행을 잡아 다른 그리드로 드래그하면 그대로 이동하고, 두 그리드의 컬럼 구조가 달라도 필드 매칭(매핑)으로 자연스럽게 변환되어 들어갑니다.
모든 기능은 AI 페어프로그래밍으로 설계·구현하고, 기존 데모를 전수 점검해 회귀 없음을 확인한 뒤 배포했습니다.

🔀 그리드 ↔ 그리드 데이터 이동 (이번 릴리스의 핵심)

두 그리드에 draggable: true + crossGrid: true 만 켜면, 행 핸들(⠿)을 잡고 다른 그리드로 끌어 이동할 수 있습니다.
여러 행을 선택해 한 번에 옮길 수 있고, 드래그 중에는 삽입 위치를 ▶━━◀ 마커로 또렷하게 보여줍니다.

const common = {
  columns, selection: 'multiple',
  draggable: true,
  crossGrid: true,                                   // 양쪽 그리드 모두 켜기
  onGridDropBefore:   (e) => { if (locked) return false; }, // 변경전(취소 가능)
  onGridDropAfter:    (e) => save(e.rows),                  // 변경후(저장)
  onGridDropComplete: (e) => toast('이동 완료'),            // 완료시
};
new OpenGrid('#left',  common);
new OpenGrid('#right', common);
  • 3단계 이벤트 — 변경전 / 변경후 / 완료시로 나뉘어, 검증·저장·알림을 단계별로 처리합니다.
  • 화살표 셔틀 — 드래그 대신 체크박스 + ▶ ◀ 버튼으로 옮기는 UI도 제공합니다(createGridShuttle).
  • 이동 결과는 보낸 쪽 removed · 받은 쪽 added 상태로 추적되어, 변경분만 서버에 저장할 수 있습니다.

👉 그리드 간 이동 데모 바로 체험하기 (새 탭)

🔗 컬럼이 다른 그리드 — 필드 매칭(매핑)

소스와 타깃의 필드 이름이 다를 때를 위한 crossGridMapping 옵션입니다.

  • interactive — 스키마가 다르면 매핑 UI(모달)가 떠서 “타깃 필드 ← 소스 필드”를 직접 연결합니다. 확인하면 변환 스크립트가 자동 생성되어, 복사해 코드에 baking 하면 다음부터는 모달 없이 자동 변환됩니다.
  • 함수 매핑 — crossGridMapping: (src) => ({ dept: src.team, memo: src.note }) 처럼 미리 정해두면 모달 없이 즉시 변환됩니다.

↕️ 가변 행 높이 (autoHeight)

autoHeight: true + 컬럼 wrap: true 조합으로, 긴 텍스트를 자르지 않고 줄바꿈하며 행 높이가 내용에 맞춰 자동으로 늘어납니다.

💱 통화 포맷

숫자 컬럼을 통화 기호와 함께 표시합니다. 포맷 문자열로 직접('₩#,##0'·'$#,##0.00'·'¥#,##0'·음수 괄호 '₩#,##0;(₩#,##0)') 지정하거나, ISO 코드(currency: 'JPY')로 로케일 통화 포맷을 자동 적용할 수 있습니다. 가이드에는 사용 가능한 통화코드 162종 표를 함께 실었습니다.

🛠️ 그 외

  • 헤더 드래그로 조절한 컬럼 너비가 재계산 후에도 유지되도록 수정(특히 가변 행 높이 모드).

✅ 품질 — 기존 데모 전수 점검

새 코어로 교체한 뒤, 기존 데모를 그냥 믿지 않고 실제로 전부 실행해 확인했습니다.

  • 단위 테스트 354건 통과.
  • 기존 데모 53개 섹션 × Vanilla·React·jQuery = 159개를 헤드리스로 로드, 런타임 에러 0건.
  • 모든 변경이 가산적이라 기존 API는 그대로 — 기존 예제 코드 수정 불필요.

📦 설치 / 링크

npm i open-grid@0.4.0
<link rel="stylesheet" href="https://unpkg.com/open-grid@0.4.0/dist/open-grid-base.css">
<script type="module">
  import { OpenGrid } from 'https://unpkg.com/open-grid@0.4.0/dist/open-grid.js';
</script>

OPEN_GRID 0.4.0 · MIT License · framework-agnostic (Vanilla / React / Vue / jQuery / Angular)

공유하기