순수 JavaScript
데이터 그리드 라이브러리

범위 채우기·마스터/상세·수식 셀·통합 차트·다국어에 더해, Apache ECharts 차트 연동(30여 종)·조건부서식·실시간 데이터가 새로 들어왔습니다. 각 항목의 링크에서 실제 데모를 확인할 수 있습니다.

범위 선택·채우기 — 드래그·Shift로 셀 범위를 선택하고, 채우기 핸들로 값을 복제하거나 연속 시리즈를 생성한다. Ctrl+D·Ctrl+R 채우기와 엑셀 클립보드 붙여넣기를 지원한다.

마스터·상세 — 행을 펼쳐 하위 상세와 서브그리드를 표시한다. 정렬·필터·스크롤 이후에도 펼침 상태와 입력값이 유지된다.

수식 셀 — A1과 [필드] 두 참조 방식, 필터를 인식하는 범위 함수를 지원한다. 합계는 입력과 동시에 반영되며, 부동소수 한계·순환 참조 오류는 감추지 않고 그대로 표기한다.

통합 차트 — 그리드 데이터를 컬럼·라인 차트로 그린다. 선택 행 비교와 수식 연동 실시간 갱신을 지원하며, 차트 렌더는 화면과 분리된 구조다.

차트 연동 (Apache ECharts) — 그리드 데이터를 Apache ECharts 30여 종 차트로 연동한다. 코어는 데이터·이벤트만 제공하고 ECharts는 외부에서 로드하므로 그리드 번들 크기에 영향이 없다. 막대·라인·도넛·산점·게이지·히트맵·트리맵·생키·캔들·레이더·퍼널·박스플롯·지도·관계망·캘린더 등을 지원하며, 세로축은 0에서 시작(제로 베이스라인)하고 결측은 빈 구간으로, 축 절단·다운샘플 같은 변환에는 배지를 달아 값을 왜곡 없이 읽히게 한다. 그리드와 차트가 클릭·선택·hover로 양방향 연동된다.

조건부서식 — 셀 값에 따라 데이터바·히트맵·아이콘셋을 셀 안에 그린다. 규칙 우선순위와 계보로 색이 정해지며, 같은 데이터의 ECharts 차트를 나란히 두어 셀과 차트가 같은 값을 같은 표기로 보여준다.

실시간 데이터 — 스트리밍·폴링으로 그리드와 차트를 실시간 갱신한다. 새 데이터는 위로 쌓이고, 롤링 윈도우로 과부하를 막으며, 갱신을 멈추면 최신이 아님을 배지로 고지한다.

다국어(i18n) — UI 문자열과 숫자·날짜 형식을 로케일 단위로 전환하고, 부분 등록 시 기본 언어로 폴백한다. 함께 추가된 그리드 간 이동은 두 표 사이를 드래그·화살표로 옮기며 필드를 매핑한다.