행 데이터 타입 / Row data type
그리드를 생성해 컨테이너에 마운트한다. / Create the grid and mount it into the container.
행 데이터 타입 / Row data type
CSS 셀렉터 또는 호스트 요소 / CSS selector or host element
그리드 옵션(columns 필수) / Grid options (columns required)
이 인스턴스의 공개 메서드 동작을 코어를 고치지 않고 감싸 바꾸는 진입점. 호출하면 원본 메서드를 감싸는
레이어를 얹고(grid.override(name, (orig, ...args) => ...)), .strategy(slot, fn) 으로는 코어가
미리 열어 둔 확장 슬롯(예: 표시 텍스트 포맷터)에 함수를 꽂는다. 특정 그리드의 표시·계산·검증 로직만
살짝 바꾸고 싶을 때 상속·포크 없이 쓰는 훅. destroy 시 모든 레이어가 자동 복구된다.
/ Entry point to wrap and change this instance's public-method behavior without editing the core.
Calling it layers a wrapper over the original (grid.override(name, (orig, ...args) => ...));
.strategy(slot, fn) plugs a function into a slot the core opened in advance (e.g. the display
formatter). Use it as a hook when you want to tweak one grid's display/compute/validation logic
without subclassing or forking. All layers are restored automatically on destroy.
Staticdefaults정적 전역 defaults 네임스페이스 (strategy 슬롯). / Static global defaults namespace (strategy slots).
확장점 레지스트리 정면 — 렌더훅 등록, strategy/override 타입드 카탈로그, 커밋 전후 훅(MutationHook)을 한곳에서 발견·등록한다. 코어를 고치지 않고 셀 클래스·aria 라벨·표시 텍스트 같은 렌더 파이프라인 지점에 끼어들고 싶을 때 진입점으로 쓴다. 반환값으로 훅을 등록하면 다음 렌더부터 반영된다. / Facade for the extension-point registry — discover and register render hooks, the typed strategy/override catalog, and before/after commit hooks (MutationHook) in one place. Use it as the entry point when you want to hook into the render pipeline (cell class, aria label, display text) without editing the core; hooks you register apply from the next render on.
확장점 레지스트리 / The extension-point registry
지정 행을 활성/선택한다. / Activate (select) the given row.
트리거 등록('before:{op}' 취소 가능, 'after:{op}' 결과 수신). / Register a trigger ('before:{op}' can cancel, 'after:{op}' receives the result).
트리거 이벤트명 / Trigger event name
핸들러(ctx.cancel() 지원) / Handler (supports ctx.cancel())
체이닝용 this / this for chaining
컬럼 구성 전체를 새 정의로 갈아끼우고 다시 그린다. 화면 모드에 따라 보여줄 열 세트를 통째로 바꿀 때 쓴다(개별 추가/삭제는 insertColumn/deleteColumn). / Replace the entire column set with new definitions and re-render — for swapping the whole column layout by view mode (use insertColumn/deleteColumn for single changes).
자동 병합: 지정 필드 컬럼에서 연속 같은 값을 rowSpan으로 묶는다. / Auto merge: consecutive equal values in the given field columns are merged via rowSpan.
배치 쓰기를 연다. 이 뒤로 이어지는 writeCell 들은 그때그때 다시 그리지 않고 모아 두었다가 endBatch 에서 한 번에 반영된다. 수많은 셀을 갱신할 때 endBatch 와 짝지어 감싼다. / Open a write batch — subsequent writeCell calls are collected instead of re-rendering each time, and flushed together at endBatch. Wrap bulk updates with a matching endBatch.
field 값이 values 에 포함되는 행을 체크한다. / Check rows whose field value is in values.
수식 제거(마지막 계산값은 유지). / Remove the formula (last computed value kept).
데이터만 전부 비운다 — 컬럼 정의와 옵션은 그대로 두고 행만 0건으로 만든다. 같은 표 구조를 유지한 채 내용만 갈아엎기 전에 쓴다. / Empty just the data — keep column defs and options, drop all rows to zero. Use it before reloading content into the same table shape.
그룹핑 해제. / Clear grouping.
병합 해제. / Clear all merges.
현재 범위 선택을 모두 해제해 하이라이트를 지운다. / Clear the range selection, removing the highlight.
트리거 전체 또는 특정 이벤트 클리어. / Clear all triggers or those of one event.
Optionalevent: string컨텍스트 메뉴를 닫는다. / Close the context menu.
모든 그룹 접힘. / Collapse all groups.
모든 상세 패널 접힘. / Collapse all detail panels.
모든 트리 노드 접힘. / Collapse all tree nodes.
행 상세 패널 접힘. / Collapse the detail panel.
그리드에 들어 있는 데이터를 그대로 원천으로 삼아 차트를 만든다. 별도로 데이터를 넘길 필요 없이
"어떤 컬럼을(source/series) 어떤 모양으로(type) 그릴지"만 지정하면 된다. live: true 로 만들면
그리드 데이터가 바뀔 때 차트도 자동으로 다시 그려져, 표와 그래프가 항상 같은 값을 가리킨다.
/ Create a chart that uses the grid's own data as its source. You don't pass data separately — just
declare which columns to draw (source/series) and how (type). With live: true the chart re-renders
whenever the grid data changes, so table and chart always show the same numbers.
차트 구성(소스·타입·배치 등) / Chart config (source, type, placement, …)
생성된 차트 인스턴스 / The created chart instance
컬럼을 삭제한다(해당 field 참조 수식은 #REF 처리). / Delete a column (formulas referencing the field become #REF).
행을 인덱스로 삭제하고 화면을 갱신한다. 하나만 지우려면 숫자를, 여러 개를 한 번에 지우려면 인덱스 배열을
넘긴다(배열로 넘기면 배치로 한 번에 처리되어 개별 호출보다 빠르다). 삭제된 행은 변경 추적의 "삭제된 행"으로
남아 getRemovedRows() 로 확인할 수 있다.
/ Delete row(s) by index and refresh. Pass a number for one row, or an array to remove several at once
(an array is handled in a single batch, faster than one-by-one). Removed rows stay in change tracking
as "removed" and can be read via getRemovedRows().
삭제할 행 인덱스(단건 또는 배열) / Row index to delete (single or array)
선택 해제. / Clear the selection.
그리드를 파괴한다(옵저버/이벤트/차트/패널 해제, DOM 정리, override 전체 복구). / Destroy the grid (detach observers/events/charts/panels, clean the DOM, restore all overrides).
이 그리드가 만든 모든 차트를 파괴한다. 데이터 변경 구독까지 함께 끊어 메모리 누수를 막으므로, 차트를 정리할 때 반드시 호출한다. / Destroy every chart this grid made, cutting their data-change subscriptions too to prevent leaks — call it when tearing charts down.
트리 모드 비활성화. / Disable tree mode.
실시간 소스 배선을 해제한다(구독·타이머·소켓 정리, 멱등). / Disconnect the realtime source (teardown; idempotent).
이벤트 발화 — 등록된 모든 핸들러를 순서대로 호출. / Emit an event — invokes all registered handlers in order.
이벤트 이름 / Event name
핸들러에 전달할 인자 / Arguments passed to handlers
호출된 핸들러가 하나 이상이면 true / true if at least one handler was invoked
트리 모드 활성화. / Enable tree mode.
배치를 닫고 모아 둔 쓰기를 한 번에 반영한다 — 그 사이 변경이 있었으면 렌더 1회 + dataChange 이벤트 1회만 발생한다. beginBatch 와 반드시 짝을 맞춘다. / Close the batch and flush collected writes at once — if anything changed, exactly one render + one dataChange event fires. Always pair it with beginBatch.
모든 그룹 펼침. / Expand all groups.
모든 트리 노드 펼침. / Expand all tree nodes.
지정 트리 노드 펼침/접힘. / Expand/collapse the given tree nodes.
행 아래에 상세(마스터/디테일) 패널을 펼쳐 그 행의 하위 정보나 서브그리드를 보여 준다. 목록 행을 눌러 세부를 펼치는 UI를 코드로 여는 API다. rowRef 는 화면 위치(flat index)나 행 id({id})로 지정한다. / Expand the master/detail panel under a row to reveal its sub-info or a subgrid — the code path for a click-to-expand row UI. Reference the row by on-screen position (flat index) or id ({id}).
현재 그리드 내용을 CSV 파일로 내려받게 한다(가벼운 텍스트 교환용). 옵션은 exportExcel 과 동일. / Download the current grid as a CSV file (lightweight text interchange); same options as exportExcel.
Optionaloptions: string | ExportOptions현재 그리드 내용을 엑셀(xlsx) 파일로 내려받게 한다. 문자열을 넘기면 파일명으로, 옵션 객체로는 컬럼·범위 등을 세밀 지정한다(기본은 보이는 데이터 전부). / Download the current grid as an Excel (xlsx) file. A string is used as the filename; an options object fine-tunes columns/scope (defaults to all visible data).
Optionaloptions: string | ExportOptions현재 그리드 내용을 JSON 파일로 내려받게 한다(원본 객체 구조 보존). 옵션은 exportExcel 과 동일. / Download the current grid as a JSON file (preserves the object structure); same options as exportExcel.
Optionaloptions: string | ExportOptions모든 워크시트를 다중 시트 엑셀로 내보낸다. / Export all worksheets as a multi-sheet Excel file.
Optionalfilename: string원본 범위의 값을 대상 범위로 채워 넣는다 — 엑셀에서 채우기 핸들을 아래·옆으로 끌어 값을 복사하거나 연속값을 만드는 동작을 프로그램으로 실행하는 API다. 채우는 방향(가로/세로)은 두 범위의 상대 위치로 자동 추론하며, 내부적으로 배치로 묶어 한 번에 반영한다. / Fill the target range from the source range — the programmatic form of dragging Excel's fill handle down/across to copy values or extend a series. The direction (horizontal/vertical) is inferred from the two ranges' relative position, and the writes are applied in one batch.
왼쪽 n개 컬럼을 가로 스크롤에도 고정한다. 이름·id 같은 식별 컬럼을 항상 보이게 두고 나머지만 좌우로 훑을 때 쓴다(n=0 이면 고정 해제). / Freeze the leftmost n columns against horizontal scroll — keep identity columns (name/id) always visible while scrolling the rest (n=0 unfreezes).
지금 활성인 선택 범위 하나를 바로 꺼내는 지름길(선택이 없으면 null). 선택 여부만 확인하거나 그 범위로 값을 읽을 때 쓴다. / Shortcut to the single active selection range (null when none) — handy to check selection or read values from it.
활성 행 인덱스(-1 = 없음). / Active row index (-1 when none).
추가된 행 목록. / Added rows.
체크된 행 데이터만 배열로. / Checked row data only.
셀 수식 에러 코드(없으면 null). / Formula error code of the cell (null when none).
셀 수식 원문(없으면 null). / Formula source of the cell (null when absent).
이 그리드가 만들어 아직 살아 있는 차트 인스턴스들을 돌려준다(일괄 갱신·조회용). / Return the still-alive chart instances this grid created — for bulk refresh/inspection.
체크된 행 목록({row, rowIndex}). / Checked rows ({row, rowIndex}).
보이는 컬럼 수. / Number of visible columns.
field 의 보이는 컬럼 인덱스(-1 = 없음). / Visible column index of the field (-1 when absent).
해당 컬럼의 값 배열. / Values of the column.
지금 화면에 보이는 순서·범위 그대로의 데이터 배열을 돌려준다(정렬·필터가 반영된 결과). 사용자가 보고 있는 그대로를 내보내거나 집계할 때 쓴다. / Return the data array as currently shown (sort/filter applied) — use it to export or aggregate exactly what the user sees.
디버깅용 — 이 셀을 참조하는(종속) 셀들. / Debugging — cells that depend on this cell.
상세 인스턴스(renderer 반환값 또는 자동 서브그리드; 펼친 적 없으면 undefined). / Detail instance (renderer result or auto subgrid; undefined if never expanded).
화면에 실제로 보이는 셀 텍스트를 돌려준다 — 원시 값에 displayFormatter 전략(숫자·날짜 포맷 등)을 적용한 결과다. 표에 표시되는 문자열 그대로를 복사·검색·툴팁에 쓰고 싶을 때 readCell(원값) 대신 쓴다. / Return the cell text as actually displayed — the raw value with the displayFormatter strategy (number/date formatting, …) applied. Use it instead of readCell (raw) when you want the exact shown string for copy/search/tooltip.
화면 기준 행 위치(flat index) / On-screen row position (flat index)
컬럼 field / Column field
표시용 문자열 / The display string
수정된 행 목록. / Edited rows.
인덱스 위치의 field 명(없으면 ''). / Field name at the index ('' when absent).
현재 필터 상태 스냅샷. / Snapshot of the current filter state.
화면상의 행 위치(flat/visual index)와 실제 데이터 행을 서로 변환해 주는 리졸버를 돌려준다. 그룹 머리글· 트리 자식·상세 패널 같은 의사(pseudo) 행이 섞여 index 와 데이터가 어긋날 때, "이 index 가 진짜 데이터 행인가, 몇 번 rowId 인가"를 물어보는 단일 창구다. 범위 선택+채우기·수식·차트 기능이 좌표를 해석할 때 모두 이 모델을 거친다. / Return the resolver that maps between an on-screen row position (flat/visual index) and the actual data row. When pseudo rows (group headers, tree children, detail panels) are interleaved and the index no longer lines up with the data, this is the single place to ask "is this index a real data row, and which rowId is it?". Range-fill, formulas, and charts all resolve coordinates through it.
flat/visual index ↔ data 리졸버 / The flat/visual index ↔ data resolver
푸터 집계값 목록. / Computed footer values.
특정 field 의 푸터 집계값(없으면 null). / Footer value of the field (null when absent).
i18n: 현재 인스턴스 로케일 id('ko' = 기본). / i18n: current instance locale id ('ko' = default).
현재 컬럼 마스킹 활성 여부 반환. true=마스킹 중, false=해제됨 / Return whether masking is active for the column (true = masked, false = revealed).
행의 원본(수정 전) 스냅샷. / Original (pre-edit) snapshot of the row.
현재 override 가 걸린 메서드 이름들을 돌려준다(무엇을 손댔는지 감사·디버깅용). / Names of currently overridden methods — for auditing/debugging what you have touched.
디버깅용 — 이 셀이 참조하는(선행) 셀들. / Debugging — cells this cell references (precedents).
사용자가 드래그로 선택한 셀 사각형(범위)들을 정규화해 돌려준다. 선택이 없으면 빈 배열. 현재 버전은 한 번에 하나의 범위만 다루므로 길이는 최대 1이다. / Return the user's drag-selected cell rectangles, normalized; empty when nothing is selected. This version handles one range at a time, so length is at most 1.
활성 범위의 숫자 셀들만 모아 합계·평균 등 요약값을 계산한다(정밀 십진 연산 기반, 선택 없으면 null). 상태바에 "선택 합계"를 띄우는 용도. / Compute sum/avg… over just the numeric cells in the active range (exact-decimal math; null when no selection) — e.g. to show a "sum of selection" in a status bar.
활성 범위 안의 셀 값들을 행×열 2차원 배열로 추출한다. 선택 영역을 복사하거나 외부로 넘길 때 쓴다. / Extract the active range's cell values as a row×column 2D array — for copying or exporting the selection.
삭제된 행 목록. / Removed rows.
지정 인덱스의 행 객체를 돌려준다(단건 조회용). / Return the row object at the given index (single-row lookup).
현재 스크롤 좌표. / Current scroll position.
선택된 행 데이터 목록. / Selected row data.
지금 적용된 스킨 id 를 돌려준다('default' = 기본 형태). 어떤 스킨이 걸려 있는지 확인하거나 토글할 때 쓴다. / Return the currently applied skin id ('default' = stock form) — to check or toggle which skin is active.
정렬·필터를 걷어 낸 원본 데이터 배열을 돌려준다. "원래 넣었던 전체 데이터"가 필요할 때 getData() 대신 쓴다. / Return the original data array before sort/filter — use it instead of getData() when you need the full, unfiltered set.
해당 컬럼의 고유 값 배열. / Unique values of the column.
워크시트 상태 스냅샷 조회(없으면 undefined). / Get a worksheet state snapshot (undefined when absent).
워크시트 이름 목록. / List of worksheet names.
지정한 필드 값이 같은 행끼리 접었다 펼 수 있는 그룹으로 묶는다(다중 필드면 계층 그룹). "부서별 → 팀별"처럼 데이터를 범주로 요약해 보여 줄 때 쓴다. 해제는 clearGroup(). / Group rows sharing the given field values into collapsible groups (multiple fields → nested groups) — for summarizing data by category ("by dept → by team"). Undo with clearGroup().
셀에 수식이 있는지. / Whether the cell has a formula.
해당 메서드가 지금 override 로 감싸여 있는지 확인한다(조건부로 override 를 얹기 전 점검용). / Check whether the method is currently wrapped by an override (handy before layering conditionally).
컬럼(들)을 숨긴다. / Hide column(s).
행 1건을 원하는 위치에 끼워 넣고 화면을 갱신한다. "추가" 버튼으로 빈 행이나 새 레코드를 넣을 때 쓰며,
일부 필드만 담은 부분 객체를 넘겨도 된다(나머지는 비어 있는 채로 삽입). 삽입 후 변경 추적에 "추가된 행"으로
잡히고, before:insertRow 트리거로 취소·검증할 수 있다.
/ Insert one row at a chosen position and refresh the view. Use it for an "add" button that inserts a
blank row or a new record; a partial object is fine (missing fields stay empty). The row is tracked as
"added", and a before:insertRow trigger can cancel/validate it.
행 상세 패널 펼침 여부. / Whether the detail panel is expanded.
사용자가 검색 결과나 차트 클릭으로 특정 행을 가리켰을 때, 그 행이 화면에 보이도록 스크롤하고 선택 표시까지 해 준다. 큰 데이터에서 "어디였더라"를 없애는 이동 도우미다. / When a search result or chart click points at a specific row, scroll it into view and select it. A navigation helper that removes the "where was it again?" problem in large data.
이동할 행의 위치(flat index) / Position (flat index) of the row to jump to
특정 이벤트에 등록된 핸들러 수 반환. / Return the number of handlers registered for an event.
이벤트 이름 / Event name
등록된 핸들러 개수 / Count of registered handlers
수동 병합: [{row, col, rowSpan?, colSpan?}] / Manual merge: [{row, col, rowSpan?, colSpan?}]
체크된 행을 다른 그리드로 이동 (화살표 셔틀용). 체크 없으면 무시. / Move checked rows to another grid (arrow-shuttle use). No-op when nothing is checked.
이 그리드의 행들을 다른 그리드로 이동(move)한다. 드래그·화살표 셔틀 공통 경로. 3단계 이벤트(before→after→complete)와 crossGridMapping(필드 매핑)을 적용한다. / Move rows from this grid to another grid (shared path for drag and arrow shuttle). Applies the three-phase events (before→after→complete) and crossGridMapping (field mapping).
대상 그리드 / Target grid
이동할 소스 행 인덱스들 / Source row indexes to move
OptionaltargetIndex: number삽입 시작 인덱스(생략 시 끝) / Insertion start index (end when omitted)
이동 성공 여부 / Whether the move succeeded
핸들러 해제. handler 미지정 시 해당 이벤트의 모든 핸들러 제거.
/ Remove a handler. When handler is omitted, removes all handlers for the event.
이벤트 이름 / Event name
Optionalhandler: Handler제거할 특정 핸들러(생략 시 전체) / Specific handler to remove (omit for all)
체이닝용 this / this, for chaining
원본 셀 수식을 dRow/dCol 만큼 옮겨 새 위치에 맞게 상대 참조를 조정한 수식 원문을 만든다. 범위 선택+채우기
로 수식을 아래·옆으로 끌어 복사할 때, 절대 참조($ 고정)는 그대로 두고 상대 참조만 이동량만큼 밀어 주는
저수준 도우미다(엑셀에서 수식을 드래그 복사하면 참조가 따라 움직이는 것과 같은 규칙).
/ Produce a formula source with relative references shifted by dRow/dCol so it fits a new location.
A low-level helper used when range-fill drags a formula down/across: absolute ($-locked) refs stay
put while relative refs move by the offset — the same rule as drag-copying a formula in a spreadsheet.
원본 셀의 rowId / rowId of the source cell
원본 셀의 field / field of the source cell
행 오프셋 / Row offset
열 오프셋 / Column offset
이동 반영된 새 수식 원문 / New formula source with the offset applied
이벤트 핸들러 등록(반복 호출). / Register a handler for an event (fires repeatedly).
이벤트 이름 / Event name
발화 시 호출될 콜백 / Callback invoked on emit
체이닝용 this / this, for chaining
1회성 이벤트 핸들러 등록(발화 후 자동 제거). / Register a one-shot handler (auto-removed after first emit).
이벤트 이름 / Event name
한 번만 호출될 콜백 / Callback invoked exactly once
체이닝용 this / this, for chaining
컨텍스트 메뉴를 지정 좌표에 연다. / Open the context menu at the event position.
좌표를 제공할 마우스 이벤트 / Mouse event providing coordinates
Optionalitems: ContextMenuItem[]커스텀 메뉴 항목(생략 시 기본 메뉴) / Custom items (default menu when omitted)
데이터를 정렬한다 — 헤더 클릭 없이 코드로 정렬을 걸 때 쓴다. 한 컬럼만 정렬하려면 field 와 방향을,
여러 컬럼을 우선순위대로 정렬하려면 SortItem 배열을 넘긴다. 정렬 전후로 before/after:orderBy 트리거가
돌고, 취소 가능한 before:orderBy 로 정렬을 막을 수도 있다.
/ Sort the data from code without a header click. Pass a field + direction for a single column, or a
SortItem array to sort by several columns in priority order. before/after:orderBy triggers run
around it, and a cancelable before:orderBy can veto the sort.
field 명 또는 정렬 목록 / Field name or sort list
단일 field 일 때 방향(기본 'asc') / Direction for single-field form (default 'asc')
기존 데이터 앞에 행들을 끼워 넣는다(최신 항목을 맨 위로 올릴 때 등). / Prepend rows before the existing data (e.g. to push newest items to the top).
인쇄용 창을 연다. / Open the print view.
Optionaloptions: { excludeFields?: string[]; title?: string }기존 데이터 뒤에 행들을 이어 붙인다. 전체를 setData 로 갈아끼우지 않고 뒤에만 덧붙일 때 쓴다(무한 스크롤·추가 로드 등). / Append rows after the existing data — for adding to the tail without replacing everything via setData (infinite scroll, load-more, …).
셀에 저장된 가공 전 원시 값을 그대로 읽는다(포맷·마스킹을 거치지 않은 실제 데이터). 계산·비교에 쓸 원값이 필요할 때 getDisplayValue 대신 쓴다. / Read the raw stored cell value (no formatting/masking) — use it instead of getDisplayValue when you need the real value for compute/compare.
전체 수식 위상 재계산. / Recalculate all formulas in topological order.
단일 셀 + 종속 폐포만 재계산. / Recalculate one cell plus its dependent closure.
핸들러 일괄 제거. event 지정 시 해당 이벤트만, 미지정 시 전체. / Remove handlers in bulk — a single event when given, otherwise all.
Optionalevent: string비울 이벤트 이름(생략 시 전체) / Event to clear (omit for all)
체이닝용 this / this, for chaining
워크시트를 제거한다. / Remove a worksheet.
워크시트 이름을 변경한다. / Rename a worksheet.
아이콘 role 을 실제 렌더용 마크업(또는 SVGElement)으로 해석한다. 인스턴스 오버라이드(setIcon)가 있으면 그것을, 없으면 전역 아이콘을 쓴다. 커스텀 셀·버튼에 그리드와 같은 아이콘을 직접 그려 넣을 때 쓴다. / Resolve an icon role to render markup (or an SVGElement), using this instance's override (setIcon) first, then the global icon — for drawing grid-consistent icons into custom cells/buttons.
Optionalopts: { el?: boolean; size?: number; title?: string }행 위치 이동(드롭 경로에서 실행). / Move a row to a new position (executed on the drop path).
필터 해제(field 생략 시 전체). / Clear filters (all when field omitted).
Optionalfield: string정렬을 초기 상태로 되돌린다. / Reset sorting to the initial state.
그리드 크기를 변경하고 재배치한다. / Resize the grid and relayout.
Optionalw: numberOptionalh: number특정 메서드에 얹은 override 하나만 벗겨 원본 동작으로 되돌린다(다른 override 는 유지). / Peel off one method's override, restoring its original behavior (others stay).
얹어 둔 모든 override·strategy 를 한 번에 걷어 낸다. destroy 가 자동으로 호출하므로 보통 직접 부를 일은 없다. / Remove every override & strategy at once; destroy calls it automatically, so you rarely need it directly.
필터 상태를 복원한다. / Restore a saved filter state.
열려 있는 상세 패널의 폭을 부모 그리드 컬럼 폭에 다시 맞춘다. 컬럼 크기를 바꾼 뒤 상세 패널 정렬이 어긋나 보일 때 수동으로 재동기한다(보통은 자동 처리됨). / Re-sync open detail panels' widths to the parent column widths. Call it when panel alignment drifts after resizing columns (usually handled automatically).
셀에 스프레드시트 스타일 수식을 건다("=A1+B2" 형태). 셀 값을 고정 숫자가 아니라 다른 셀에서
계산되게 만들고 싶을 때 쓴다 — 참조한 셀이 바뀌면 이 셀도 자동으로 다시 계산되고, 순환 참조·에러는
getCellError() 로 표면화된다.
/ Attach a spreadsheet-style formula to a cell (e.g. "=A1+B2"). Use it when a cell's value should
be computed from other cells rather than a fixed number — the cell recomputes automatically when
a referenced cell changes, and cycles/errors surface via getCellError().
화면 기준 행 위치(flat index) / On-screen row position (flat index)
컬럼 field / Column field
'=' 로 시작하는 수식 원문 / Formula source starting with '='
조건부서식(CF) 규칙을 설정한다 — 데이터바·히트맵·아이콘셋을 렌더 경로에 배선한다.
CF 는 opt-in 이라 첫 호출 때 CF 엔진(cf/)을 동적 import 로 조립한다(베이스 번들 무증가, 별 청크).
규칙이 걸린 컬럼마다 컬럼 통계를 1회 캐시 계산(per-render 재계산 금지)한 뒤 재렌더한다.
rules=[] 를 넘기면 CF 를 해제한다(엔진·통계 캐시 clear + 잔재 제거 재렌더).
/ Set conditional-formatting rules — wires data-bars/heatmaps/icon-sets into the render path.
CF is opt-in; the CF engine (cf/) is assembled via dynamic import on first call (no base-bundle
growth, separate chunk). Column stats are cached once per rule-bearing column (never re-computed
per render), then a re-render paints them. Passing rules=[] clears CF (engine/cache reset + residue-stripping re-render).
CF 규칙 배열(빈 배열이면 해제) / CF rule array (empty array clears CF)
그리드의 데이터 전체를 새 배열로 갈아끼운다. 서버에서 목록을 새로 받아오는 등 데이터를 통째로 바꿀 때
쓴다. 행 식별자(id)를 새로 발급하므로 기존 행에 걸려 있던 셀 수식 상태는 이때 초기화된다 — 일부만 바꿀
때는 writeCell/insertRow/deleteRow 쪽이 상태를 보존한다.
/ Replace the whole data set with a new array. Use it when the data changes entirely (e.g. a fresh
list from the server). It reissues row ids, so any existing cell-formula state is reset here — for
partial changes prefer writeCell/insertRow/deleteRow, which preserve state.
새 행 배열 / New array of rows
행 간격의 촘촘함(밀도)을 바꾼다 — 같은 데이터를 화면에 더 빽빽하게('compact') 또는 여유 있게 ('comfortable') 보여 줄 때 쓴다. 행 높이·안쪽 여백 토큰만 조정하는 순수 가산적 변경이라 색·형태·질감은 전혀 건드리지 않는다. 밀도는 행 높이를 바꾸므로 좌표를 다시 계산해야 할 때 창 크기 변경과 똑같은 경로로 재배치한다. 없는 이름을 넘겨도 안전하게 기본값으로 되돌아간다(throw 안 함). / Change how tightly rows are packed (density) — show the same data more compactly ('compact') or with more breathing room ('comfortable'). It adjusts only row-height/padding tokens (purely additive), never touching color/form/texture. Because density changes row height, it relayouts via the same path as a window resize when needed. An unknown name safely falls back to the default (never throws).
밀도 값 id(예 'compact', 'comfortable') / Density value id (e.g. 'compact')
한 컬럼에 필터 조건을 걸어 조건에 맞는 행만 남긴다 — 필터 UI를 열지 않고 코드로 필터링할 때 쓴다.
같은 컬럼에 다시 호출하면 그 컬럼 필터가 교체되고, 전체 해제는 resetFilter() 를 쓴다. 정렬과 마찬가지로
before/after:setFilter 트리거가 함께 돈다.
/ Filter a column so only matching rows remain — for filtering from code without opening the filter UI.
Calling it again on the same column replaces that column's filter; clear everything via resetFilter().
Like sorting, before/after:setFilter triggers run around it.
대상 컬럼 field / Target column field
필터 조건 목록 / Filter conditions
상위 선택이 하위 선택지를 좁히는 연동(캐스케이딩) 필터 셀렉트 패널을 붙이거나 뗀다. 예를 들어 "국가 →
도시"처럼 앞 컬럼 값에 따라 뒷 컬럼 후보가 달라지는 상단 필터 UI가 필요할 때 config 로 설정하고,
null 을 넘기면 패널을 제거한다.
/ Attach or detach a cascading filter-select panel where each choice narrows the next (e.g.
"country → city", so a later column's options depend on the earlier value). Pass a config to set
it up, or null to remove the panel.
패널 구성 또는 제거용 null / Panel config, or null to remove
푸터 정의를 교체하고 다시 그린다. / Replace footer definitions and re-render the footer.
이 그리드 인스턴스에서만 특정 아이콘 role(정렬 화살표·삭제 아이콘 등) 하나를 다른 아이콘으로 바꾼다.
전역 defineIconSet 과 달리 다른 그리드에는 영향을 주지 않는다(인스턴스별 격리) — 한 화면에서만 아이콘을
커스터마이즈하고 싶을 때 쓴다. svgOrKey 는 알려진 아이콘 key 이거나 원시 SVG 본문이며, 없는 role/글리프를
넘겨도 안전하게 폴백한다(throw 하지 않음). 체이닝용 this 를 돌려준다.
/ Replace a single icon role (sort arrow, delete icon, …) for this grid instance only. Unlike the
global defineIconSet, it does not affect other grids (per-instance isolation) — use it to customize
icons on one screen. svgOrKey is a known icon key or raw SVG body; unknown roles/glyphs fall back
safely (never throws). Returns this for chaining.
시맨틱 아이콘 role / Semantic icon role
아이콘 key 또는 원시 SVG / Icon key or raw SVG
체이닝용 this / this for chaining
i18n: 이 인스턴스의 UI 로케일을 전환한다. setSkin 진영 — 데이터 불변 + 크롬/가시창 부분 재렌더.
lang 속성을 로케일 Intl 태그로 갱신(스크린리더 발음 전환), 상주 크롬(페이지네이션/찾기)의
라벨을 새로 그리고, 캐시된 필터 패널을 무효화한 뒤 헤더+가시창을 1회 재렌더한다.
미등록 로케일은 throw 하지 않고 폴백 유지(never-throw). 전환 후 localeChange 이벤트 발화.
/ i18n: switch this instance's UI locale. setSkin camp — data-immutable + partial chrome/viewport
re-render. Updates lang to the locale's Intl tag (screen-reader pronunciation), refreshes
resident chrome labels (pagination/find), invalidates the cached filter panel, then re-renders
the header + visible window once. Unknown locales never throw. Emits localeChange afterwards.
로케일 id(예 'en') / Locale id (e.g. 'en')
컬럼 마스킹 ON/OFF 전환. / Toggle column masking on/off. enabled=true → 마스킹 적용 (기본 상태) / apply masking (default state) enabled=false → 컬럼 전체 마스킹 해제 (원문 표시) / reveal the whole column (show raw values)
대상 컬럼 field / Target column field
마스킹 활성 여부 / Whether masking is active
i18n: 이 인스턴스만 단일 메시지를 오버라이드(setIcon 동형 — 첫 호출 때 child 지연 생성, 멀티그리드 격리). 자동 재렌더는 하지 않는다(다음 렌더/setLocale 때 반영). / i18n: override a single message for this instance only (isomorphic to setIcon — lazy child on first call, multi-grid isolation). No auto re-render (applied on the next render/setLocale).
dot-key 메시지 키(예 'filter.apply') / dot-key message key (e.g. 'filter.apply')
문자열('{name}' 보간) 또는 함수 / string ('{name}' interpolation) or a function
체이닝용 this / this for chaining
생성 후에 그리드 옵션 일부만 바꿔 끼운다. 그리드를 다시 만들지 않고 컨텍스트 메뉴 구성이나 그룹핑 기준 같은 설정을 바꾸고 싶을 때 쓴다 — 넘긴 옵션만 덮어쓴 뒤, 영향받는 부분(contextMenu 재초기화· groupBy 재구성 등)만 골라 갱신하고 다시 그린다. / Swap in part of the grid options after construction. Use it to change settings like the context menu or grouping keys without recreating the grid — only the passed options are overwritten, then just the affected parts (re-init contextMenu, rebuild groupBy, …) are refreshed and re-rendered.
갱신할 옵션 부분집합 / Subset of options to update
실시간 데이터 소스를 그리드에 배선한다(폴링/스트리밍/커스텀 — IRealtimeSource 구현 아무거나 DI).
CF 와 동일하게 첫 호출 시에만 realtime/ 를 동적 import(별 청크·베이스 번들 무증가). 델타는 기존
단일 쓰기 경로(MutationService)를 재사용해 적용되므로 증분=전체 불변식·수식 재계산·차트 라이브
갱신(dataChange 구독)을 자연 상속한다. 재호출 시 이전 소스는 detach 후 교체.
/ Wire a realtime source (polling/streaming/custom — any IRealtimeSource via DI). Like CF, the
realtime/ chunk is dynamically imported only on first call (separate chunk; base bundle unchanged).
Deltas reuse the existing single write path (MutationService), inheriting the incremental=full
invariant, formula recompute, and live chart refresh (dataChange subscription). Re-calling
detaches and replaces the previous source.
실시간 소스(예: new PollingSource({...})) / Realtime source (e.g. new PollingSource({...}))
Optionalopts: RealtimeWireOptions백프레셔·신선도·SR 옵션(전부 옵션) / Backpressure/freshness/SR options (all optional)
배선된 컨트롤러(.connection·.backpressureStats·.onConnection·.detach()) / The wired controller
이 그리드의 스킨(형태 축)을 런타임에 바꾼다 — defineSkin 으로 등록해 둔 스킨 id 를 골라 적용한다.
색 테마와는 완전히 별개라 색은 하나도 건드리지 않고 모서리·외곽선 같은 "생김새"만 바뀐다. 전환하면
형태 토큰을 다시 해석해야 하므로 헤더와 본문을 한 번 다시 그린다(스킨을 쓸 때만 드는 비용).
/ Switch this grid's skin (the form axis) at runtime — pick a skin id registered via defineSkin.
Fully separate from color themes, so no color changes; only the "look" (radius, border, …) changes.
Switching re-resolves form tokens, so the header and body are re-rendered once (a cost paid only when
you use skins).
적용할 스킨 id('default' = 기본 형태) / Skin id to apply ('default' = stock form)
형태(FORM 축) CSS 변수 하나를 런타임에 덮어쓴다 — 색 변수를 바꾸는 setThemeVar 의 형태 축 짝이다.
스킨 하나를 통째로 만들 필요 없이 모서리 반경 하나만 살짝 조정하고 싶을 때 쓴다. 값은 컨테이너 인라인
스타일로 들어가 스타일시트를 항상 이긴다. 색·형태를 섞지 않도록 색 값을 넣으면 throw 한다.
/ Override a single form-axis CSS variable at runtime — the form-axis sibling of setThemeVar
(which changes color variables). Use it to nudge one token (e.g. a radius) without defining a whole
skin. The value goes in as container-inline style, so it always beats stylesheets. To keep color and
form separate, passing a color value throws.
CSS 변수 이름(예 '--og-radius-md') / CSS variable name (e.g. '--og-radius-md')
형태 값(색값 넣으면 throw) / Form value (throws on a color value)
배경 질감을 바꾼다 — 밋밋한 배경 대신 리넨('linen')·종이결('paper-grain')·모눈('graph') 같은 결을 깔고 싶을 때 쓴다. 배경 페인트만 바꾸는 순수 가산적 변경이라 행 위치는 그대로다(재배치 없음). 색·형태·밀도 축과 따로 논다. 없는 이름을 넘겨도 안전하게 기본(질감 없음)으로 되돌아간다(throw 안 함). / Change the background texture — lay a grain like linen ('linen'), paper ('paper-grain'), or a grid ('graph') over the plain background. It only repaints the background (purely additive), so row positions stay put (no relayout). Independent of the color/form/density axes. An unknown name safely falls back to none (never throws).
질감 값 id(예 'linen', 'paper-grain', 'graph') / Texture value id (e.g. 'linen')
색 테마(data-og-theme)를 전환한다. / Switch the color theme (data-og-theme).
색 축 CSS 변수 1개를 런타임 설정한다. / Set one color-axis CSS variable at runtime.
숨긴 컬럼(들)을 다시 표시한다. / Show hidden column(s).
지정 워크시트로 전환한다. / Switch to the given worksheet.
i18n: 메시지를 해석한다(인스턴스 오버라이드 우선 → 활성 로케일 → ko → 키 원문). throw 하지 않음 — 렌더 루프(셀 aria) 소비자용. / i18n: resolve a message (instance override → active locale → ko → the key itself). Never throws — for render-loop consumers (cell aria).
dot-key 메시지 키 / dot-key message key
Optionalparams: Record<string, string | number>{name} 보간 파라미터 / {name} interpolation params
해석된 문자열(미등록 키면 키 원문) / Resolved string (the key itself when unknown)
데이터 배열 변환. / Convert the data set.
true = 객체 배열(기본), false = 값 2D 배열 / true = object array (default), false = 2D value array
행 상세 패널 토글. / Toggle the detail panel.
전체 체크 해제. / Uncheck all rows.
셀 하나의 값을 코드로 바꾼다(사용자 편집이 아니라 프로그램 갱신 경로). 값을 쓰면서 변경 추적에 기록하고,
이 셀을 참조하는 수식들을 다시 계산하도록 표시한 뒤 화면을 다시 그린다. 낱개로 여러 셀을 바꿀 때는 렌더가
매번 일어나니, 대량이면 writeCells() 나 beginBatch()/endBatch() 로 묶는 편이 빠르다.
/ Change one cell's value from code (the programmatic path, not user editing). It records the change in
change tracking, marks formulas that reference this cell for recompute, then re-renders. For many cells,
prefer writeCells() or beginBatch()/endBatch() since each call re-renders.
화면 기준 행 위치(flat index) / On-screen row position (flat index)
컬럼 field / Column field
기록할 값 / Value to write
여러 셀을 한 번에 쓴다. 내부에서 배치로 묶어 처리하므로 렌더·이벤트가 셀마다 터지지 않고 끝에서 한 번만
일어나, 수백 셀을 갱신할 때 낱개 writeCell 반복보다 훨씬 빠르다. 각 rowIndex 는 화면 기준 위치(flat
index)이며, 대상이 실제 데이터 행이 아니라 그룹 머리글·트리·상세 같은 의사(pseudo) 행이면 데이터 훼손을
막기 위해 그 셀은 조용히 건너뛴다. 건너뛴 셀 수를 돌려주고, 1건이라도 있으면 스크린리더 안내와
'writeCellsSkip' 이벤트로 알린다.
/ Write many cells at once. They are wrapped in one batch, so render/events fire once at the end
instead of per cell — much faster than looping single writeCell calls for hundreds of cells. Each
rowIndex is an on-screen position (flat index); if a target is not a real data row but a pseudo row
(group header, tree, detail), that cell is skipped to avoid corrupting data. Returns the number of
skipped cells and, when non-zero, surfaces it via a screen-reader announce + a 'writeCellsSkip' event.
쓰기 목록 / List of writes
건너뛴 셀 수 / Number of skipped cells
Staticdefault정적: 모든 신규 그리드에 적용될 override 레이어 등록. / Static: register an override layer applied to every newly created grid.
대상 공개 메서드 이름 / Target public method name
override 레이어 함수(첫 인자 orig) / Override layer function (first arg = orig)
재진입/에러 정책 / Reentrancy & error policy
체이닝용 OpenGrid 클래스 / The OpenGrid class for chaining
Staticdefine시맨틱 아이콘 role 세트(정렬 화살표·행 삭제 아이콘 등)를 코어 편집 없이 전역 교체한다. 기본
아이콘 대신 자사 아이콘 팩을 쓰고 싶을 때 role → 아이콘을 통째로 매핑한다 — 이후 모든 인스턴스의
아이콘 해석에 반영된다. 값은 알려진 아이콘 key 이거나 원시 SVG 본문 마크업. 한 인스턴스만 바꾸려면
grid.setIcon(role, svg) 를 쓴다.
/ Register/replace semantic icon role sets (sort arrows, row-delete icon, …) globally without
editing the core — map role → icon in one shot to swap in your own icon pack; it then affects icon
resolution across all instances. Values are known icon keys or raw SVG body markup. To change a
single instance only, use grid.setIcon(role, svg).
role → 아이콘 key 또는 원시 SVG / role → icon key or raw SVG
체이닝용 OpenGrid 클래스 / The OpenGrid class for chaining
Staticdefinei18n: UI 문자열 로케일을 코어 편집 없이 전역 등록/교체(defineSkin/defineIconSet 와 동형의
얇은 위임 파사드 — 정본은 localeRegistry.register). 부분 카탈로그 허용(폴백이 ko 로 메움).
이후 모든 인스턴스가 grid.setLocale(id) 로 사용. per-instance 오버라이드는 grid.setMessage 참조.
예) OpenGrid.defineLocale('ja', { contextMenu: { find: '検索' } })
/ i18n: register/replace a UI-string locale globally without editing the core (thin
delegation façade isomorphic to defineSkin/defineIconSet — the canonical entry is
localeRegistry.register). Partial catalogs are allowed (ko fills the gaps via fallback).
Any instance can then call grid.setLocale(id). For per-instance overrides see grid.setMessage.
로케일 id(예 'ja') / Locale id (e.g. 'ja')
메시지 부분/전체 카탈로그 / Partial or full message catalog
Optionalopts: { extends?: string }extends: ko 이전에 시도할 폴백 로케일 / extends: fallback locale tried before ko
체이닝용 OpenGrid 클래스 / The OpenGrid class for chaining
Staticdefine커스텀 스킨(형태·외곽선·모서리 같은 FORM 축)을 코어 편집 없이 전역 등록한다. 색 테마와는 별개로
그리드의 "생김새"만 바꾸고 싶을 때 쓴다 — 한 번 등록하면 어떤 인스턴스든 grid.setSkin(name) 으로
골라 쓴다. 내부 동작: 델타를 FORM 전용으로 검증(색 리터럴이 섞이면 색⊥형태 직교성을 깨므로 throw)하고
포커스 링 접근성 가드레일을 적용한 뒤, 런타임 <style> 로 .og-container[data-og-skin="name"] 블록을 주입한다.
/ Register a custom skin (the FORM axis — shape/border/radius) globally without editing the core.
Use it when you want to restyle only the grid's "look" independently of the color theme; once
registered, any instance can pick it via grid.setSkin(name). It validates the delta as
FORM-only (throws if a color literal is present, to keep color⊥form orthogonal), applies the
focus-ring accessibility guardrail, then injects a runtime <style> block for
.og-container[data-og-skin="name"].
스킨 id / Skin id
FORM 전용 토큰 델타(색값 넣으면 throw) / FORM-only token delta (throws on color values)
체이닝용 OpenGrid 클래스 / The OpenGrid class for chaining
Staticregister커스텀 셀 에디터 타입을 코어 편집 없이 등록한다. 셀을 편집 상태로 열 때 col.editor 가 typeName
과 일치하면 등록한 팩토리가 에디터를 만든다. 기본 제공 에디터(text/number/date 등)로 부족한 입력 UI가
필요할 때 쓴다. 프로세스 전역이라 한 번 등록하면 모든 그리드 인스턴스가 공유한다.
/ Register a custom cell editor type without editing the core. When a cell opens for editing and
col.editor matches typeName, the registered factory creates the editor. Use it when the
built-in editors (text/number/date, …) are not enough. Process-global (shared by all instances).
에디터 타입 이름 / Editor type name
에디터 팩토리 / Editor factory
체이닝용 OpenGrid 클래스 / The OpenGrid class for chaining
OpenGrid.registerEditor('slider', () => {
let input: HTMLInputElement;
return {
mount(container, ctx, onCommit) {
input = document.createElement('input');
input.type = 'range';
input.value = String(ctx.value ?? 0);
input.addEventListener('change', () => onCommit(Number(input.value)));
container.appendChild(input);
},
getValue: () => Number(input.value),
focus: () => input.focus(),
destroy: () => input.remove(),
};
});
Staticregister커스텀 셀 렌더러 타입을 코어 편집 없이 등록. col.type/col.renderer(문자열 또는 {type})가
typeName 과 일치하면 등록 팩토리가 렌더러를 생성한다. 프로세스 전역(모든 그리드 인스턴스 공유).
/ Register a custom cell renderer type without editing the core. When col.type/col.renderer
(string or {type}) matches typeName, the registered factory creates the renderer.
Process-global (shared by all grid instances).
렌더러 타입 이름 / Renderer type name
렌더러 팩토리 / Renderer factory
체이닝용 OpenGrid 클래스 / The OpenGrid class for chaining
OPEN_GRID 코어 그리드 클래스. / The OPEN_GRID core grid class.
컨테이너 요소에 마운트되어 가상 스크롤로 대량 행을 렌더하는 초경량 데이터 그리드. 수천~수십만 행을 표로 다루면서 정렬·필터·그룹/트리·병합·범위 선택과 채우기·마스터/디테일·셀 수식·그리드 데이터 통합 차트가 필요할 때 쓴다. 코어를 고치지 않고 동작을 바꾸는 override/strategy 확장 커널을 함께 제공한다. / An ultra-light data grid that mounts into a container element and renders large row sets through virtual scrolling. Use it to present thousands to hundreds of thousands of rows with sorting, filtering, group/tree, merging, range selection & fill, master/detail, cell formulas, and integrated charts backed by the grid data. It also ships the override/strategy extension kernel for changing behavior without editing the core.
Example