OPEN GRID 1.3.0 은 업무 데이터를 읽는 방식을 넓힌 릴리스입니다.
값에 따라 셀을 물들이는 조건부서식, 그리드 데이터를 그대로 그리는 통합 차트,
끊임없이 흐르는 실시간 데이터, 그리고 화면의 밀도·질감을 조절하는 외관 축이 들어왔습니다.
기본값은 이전과 동일하며, 새 기능은 옵션을 줄 때만 켜집니다.
새 데이터는 그리드 위쪽에 쌓이고, 차트는 그만큼 이어 그립니다.
👉 데모 사이트에서 30여 종 차트 예제 전체 보기
(React·Vue·Angular·jQuery·Vanilla 모두 제공).
이번에 새로 들어온 것
🎨 조건부서식 (Conditional Formatting)
셀 값에 따라 데이터바·히트맵·아이콘셋을 셀 안에 그립니다. 여러 규칙이 충돌해도
우선순위 계보로 “왜 이 색인가”가 결정됩니다.
- 데이터바는 0 기준선에서 시작하고, 음수는 방향과 무채색(그래파이트)으로 구분해 색만으로 오해하지 않게 했습니다.
- 히트맵은 단색 명도 램프(무지개 아님)에 컬러바를 함께 두고, 채움 위 글자는 대비를 자동 확보합니다.
- 모든 시각 표기에는 텍스트 등가(스크린리더용 요약)가 따라붙습니다.
📈 통합 차트 · 실시간 데이터
그리드가 들고 있는 값을 그대로 차트로 그립니다(화면과 분리된 헤드리스 구조).
스트리밍·폴링으로 데이터가 흐르면 그리드와 차트가 함께 실시간 갱신되고, 롤링 윈도우로 과부하를 막습니다.
🧩 외관 신규 축 · 데모 30여 종
테마·스킨에 더해 밀도(density)·질감(texture) 축으로 화면 촘촘함과 재질을 조절합니다.
데모 사이트에는 그리드를 Apache ECharts로 연동한 30여 종 차트 예제(막대·라인·도넛·산점·히트맵·트리맵·생키·캔들·레이더·지도·캘린더…)를 새로 열었고,
React · Vue · Angular · jQuery · Vanilla 다섯 프레임워크 예제를 모두 제공합니다.
차트는 값을 왜곡하지 않도록 0 기준선·결측 빈 구간·변환 배지를 기본으로 강제합니다.
그대로인 것
새 기능은 모두 옵션 기반입니다. 옵션을 주지 않으면 API·동작·화면은 이전과 완전히 동일합니다.
코어 테스트 1,711건이 모두 통과합니다.
설치
npm install open-grid
# 또는 CDN
# https://unpkg.com/open-grid@1.3.0/dist/open-grid.js
npmjs.com/package/open-grid
· 코어 의존성 0, MIT 라이선스로 상용에도 자유롭게. 차트 라이브러리(ECharts)는 번들에 포함되지 않으며 필요할 때만 외부에서 불러옵니다.
OPEN GRID 는 순수 JavaScript 데이터 그리드입니다. React·Vue·Angular·jQuery·Vanilla 어디서든 동작합니다. · MIT License