OPEN_GRID API - v1.3.1
    Preparing search index...

    Interface GridOptions<T>

    그리드 생성 옵션. / Grid construction options.

    new OpenGrid(container, options) 의 두 번째 인자. columns 만 필수. / Second argument of new OpenGrid(container, options). Only columns is required.

    const grid = new OpenGrid('#host', {
    columns: [{ field: 'name', header: '이름' }, { field: 'qty', header: '수량', type: 'number' }],
    height: 400,
    editable: true,
    });
    interface GridOptions<T = any> {
        ariaLabel?: string;
        autoHeight?: boolean;
        calcPrecision?: number;
        chart?: ChartGlobalOptions;
        checkColumn?: boolean;
        clipboard?: boolean;
        columnReorder?: boolean;
        columns: ColumnDef<T>[];
        conditionalFormat?: CFRule[];
        contextMenu?: boolean | ContextMenuItem[];
        crossGrid?: boolean;
        crossGridMapping?: "auto" | "interactive" | ((srcRow: T) => Partial<T>);
        cssVars?: Record<string, string>;
        defaultColumnWidth?: number;
        defaultSort?: SortItem[];
        density?: string;
        draggable?: boolean;
        editable?: boolean;
        editMode?: "none" | "click" | "dblclick";
        expandOnLoad?: boolean;
        fallbackViewportHeight?: number;
        fillWidth?: boolean;
        filterable?: boolean;
        footer?: FooterDef[];
        footerHeight?: number;
        footerPosition?: "top" | "bottom";
        formula?: FormulaOptions;
        frozenColumns?: number;
        frozenRows?: number;
        groupBy?: string[];
        headerHeight?: number;
        height?: string | number;
        history?: boolean;
        historySize?: number;
        locale?: string;
        masterDetail?: MasterDetailOptions<T>;
        mergeCells?: boolean;
        messages?: PartialLocaleMessages;
        multiSort?: boolean;
        onCellClick?: (e: CellEvent<T>) => void;
        onCellDblClick?: (e: CellEvent<T>) => void;
        onCellKeyDown?: (e: CellKeyEvent<T>) => void;
        onCellKeyPress?: (e: CellKeyEvent<T>) => void;
        onCellKeyUp?: (e: CellKeyEvent<T>) => void;
        onCellMouseDown?: (e: CellEvent<T>) => void;
        onCellMouseMove?: (e: CellEvent<T>) => void;
        onCellMouseOut?: (e: CellEvent<T>) => void;
        onCellMouseOver?: (e: CellEvent<T>) => void;
        onCellMouseUp?: (e: CellEvent<T>) => void;
        onColumnReorder?: (
            e: { field: string; fromIndex: number; toIndex: number },
        ) => void;
        onDataChange?: (data: T[]) => void;
        onDrop?: (e: DragDropEvent<T>) => void;
        onEditBefore?: (e: EditEvent<T>) => boolean;
        onEditEnd?: (e: EditEvent<T>) => void;
        onEditStart?: (e: EditEvent<T>) => void;
        onFilterChange?: (e: FilterEvent) => void;
        onGridDropAfter?: (e: GridDropEvent<T>) => void;
        onGridDropBefore?: (e: GridDropEvent<T>) => boolean | void;
        onGridDropComplete?: (e: GridDropEvent<T>) => void;
        onGridDropMapping?: (e: GridMappingEvent<T>) => void;
        onRangeChange?: (e: RangeChangeEvent) => void;
        onRangeCopy?: (e: RangeCopyEvent) => void;
        onRangeFill?: (e: RangeFillEvent) => void;
        onReady?: (grid: OpenGridInstance<T>) => void;
        onRowClick?: (e: RowEvent<T>) => void;
        onRowCollapse?: (e: RowExpandEvent<T>) => void;
        onRowDblClick?: (e: RowEvent<T>) => void;
        onRowDrop?: (e: { fromIndex: number; toIndex: number }) => void;
        onRowExpand?: (e: RowExpandEvent<T>) => void;
        onRowMouseDown?: (e: RowEvent<T>) => void;
        onRowMouseMove?: (e: RowEvent<T>) => void;
        onRowMouseOut?: (e: RowEvent<T>) => void;
        onRowMouseOver?: (e: RowEvent<T>) => void;
        onRowMouseUp?: (e: RowEvent<T>) => void;
        onScroll?: (e: ScrollEvent) => void;
        onSelectionChange?: (e: SelectionEvent<T>) => void;
        onSortChange?: (e: SortEvent) => void;
        overrideStrict?: boolean;
        pageSize?: number;
        pagination?: boolean;
        rangeSelection?: RangeSelectionOptions;
        rowHeight?: number;
        rowNumber?: boolean;
        selection?: SelectionMode;
        skin?: string;
        sortable?: boolean;
        stateColumn?: boolean;
        summary?: SummaryOptions;
        texture?: string;
        theme?: string;
        tooltips?: boolean;
        treeId?: string;
        treeMode?: "flat" | "auto";
        treeParentId?: string;
        width?: string | number;
        worksheets?: WorksheetDef<any>[];
    }

    Type Parameters

    • T = any

      행 데이터 타입 / Row data type

    Index

    Properties

    ariaLabel?: string

    그리드 컨테이너 aria-label. / aria-label of the grid container.

    autoHeight?: boolean

    셀 내용이 길어 줄바꿈될 때 행 높이를 내용에 맞춰 자동으로 늘립니다. 컬럼의 wrap 과 함께 씁니다. / Auto-grow a row's height to fit wrapped content. Use together with a column's wrap.

    calcPrecision?: number

    수식·집계 계산에 쓸 기본 소수점 정밀도. 기본 10. / Default decimal precision for formulas/aggregation. Default 10.

    그리드 데이터를 그대로 쓰는 통합 차트 세부 설정. / Detailed options for the chart integrated on the grid's own data.

    checkColumn?: boolean

    행 선택용 체크박스 컬럼을 붙일지. / Whether to add a checkbox column for selecting rows.

    clipboard?: boolean

    Ctrl+C / Ctrl+V 로 셀 값을 복사·붙여넣기하게 할지. / Whether Ctrl+C / Ctrl+V copy-paste of cell values is enabled.

    columnReorder?: boolean

    머리글을 드래그해 컬럼 순서를 바꾸게 할지. / Whether headers can be dragged to reorder columns.

    columns: ColumnDef<T>[]

    컬럼 정의 배열(필수). / Column definitions (required).

    conditionalFormat?: CFRule[]

    조건부 서식 규칙 목록(값에 따라 셀을 데이터바·색조·아이콘으로 강조). 지정하지 않으면 아무 것도 바뀌지 않습니다. / Conditional-format rules — highlight cells by value with data-bars, color scales, or icon sets. Unset changes nothing.

    contextMenu?: boolean | ContextMenuItem[]

    우클릭 컨텍스트 메뉴. true=기본 메뉴, false=끔, 배열=직접 정한 항목들. / Right-click context menu — true = default menu, false = off, array = your own items.

    crossGrid?: boolean

    그리드↔그리드 행 드래그 이동 허용 (draggable:true 와 함께 사용, 양쪽 그리드 모두 true 여야 이동) / Enable grid-to-grid row drag (use with draggable:true; both grids must be true)

    crossGridMapping?: "auto" | "interactive" | ((srcRow: T) => Partial<T>)

    크로스그리드 이동 시 소스→타깃 행 변환 방식. / How source rows are transformed on cross-grid moves.

    • 'auto'(기본): 필드명 그대로 복사 / 'auto' (default): copy by matching field names
    • 'interactive': 소스/타깃 스키마가 다르면 매핑 모달을 띄워 개발자가 매칭 + 변환 스크립트 출력 / 'interactive': show a mapping modal when schemas differ, emitting a transform script
    • 함수: (srcRow) => targetRow 로 직접 변환 (모달 없이 baking) / function: transform directly without the modal
    cssVars?: Record<string, string>

    컨테이너에 주입할 CSS 변수 맵. / CSS custom properties injected on the container.

    defaultColumnWidth?: number

    width 도 flex 도 안 준 컬럼에 적용할 기본 폭(px). / Fallback width (px) for columns given neither width nor flex.

    defaultSort?: SortItem[]

    처음 로드될 때 미리 적용해 둘 정렬 상태. / The sort state to apply up front on first load.

    density?: string

    행 간격(밀도) 이름. 촘촘·보통·여유처럼 행 높이와 여백을 통째로 바꿉니다. 지정하지 않으면 아무 것도 바뀌지 않습니다. / The row-spacing (density) name — compact/normal/roomy row heights and paddings. Unset changes nothing.

    draggable?: boolean

    행을 드래그해 순서를 바꾸게 할지. / Whether rows can be dragged to reorder.

    editable?: boolean

    그리드 전체의 편집 스위치. 켜져 있고 컬럼의 editable 도 참일 때만 실제로 편집이 열립니다(둘 다 참 조건). / The grid-wide edit switch. Editing opens only when this AND a column's editable are true.

    editMode?: "none" | "click" | "dblclick"

    편집을 어떻게 시작할지. 'click'=한 번 클릭, 'dblclick'=더블클릭, 'none'=마우스로는 진입 불가(API 로만). / How editing starts — 'click' single click, 'dblclick' double click, 'none' no mouse entry (API only).

    expandOnLoad?: boolean

    로드하자마자 모든 노드를 펼쳐 둘지. / Whether to expand every node right after loading.

    fallbackViewportHeight?: number

    뷰포트 안전장치(옵트인, 기본 undefined = OFF = 기존 동작 완전 불변). / Viewport safety net (opt-in; default undefined = OFF = behavior fully unchanged). 호스트가 그리드 컨테이너 조상 체인에 확정 높이(definite height)를 주지 않으면 내부 스페이서(totalRows×rowHeight)가 컨테이너를 전체 콘텐츠 크기로 늘리고, ResizeObserver 되먹임으로 windowing 이 무력화되어 전 행이 DOM 렌더되는 폭주가 발생한다 (대량 데이터일수록 재앙적). 이 값을 지정하면, 컨테이너가 전 콘텐츠를 다 담는 "언바운드" 상태로 감지될 때에 한해 윈도잉 뷰포트 높이를 이 값(px)으로 클램프해 폭주를 차단한다. 정상적으로 확정 높이가 있는 바운드 컨테이너에는 영향이 없다. 1순위 권장은 컨테이너/그리드에 확정 height 를 주는 것이며, 이 옵션은 안전망이다. / When the container ancestor chain has no definite height, the internal spacer (totalRows×rowHeight) inflates the container and a ResizeObserver feedback loop defeats windowing, DOM-rendering every row (catastrophic on large data). If set, and only when the container is detected as "unbounded", the windowing viewport height is clamped to this px value. Bounded containers are unaffected. Prefer giving the container a definite height; this option is a safety net.

    fillWidth?: boolean

    컬럼 폭의 합이 컨테이너를 꽉 채우도록 늘립니다. 오른쪽에 빈 공간을 남기고 싶지 않을 때. / Stretch column widths so their sum fills the container — when you don't want empty space on the right.

    filterable?: boolean

    필터 기능을 그리드 전체에서 켤지. 컬럼별 filterable 로 예외를 둘 수 있습니다. / Turn filtering on grid-wide. Per-column filterable can override.

    footer?: FooterDef[]

    아래(또는 위) 고정 푸터에 넣을 셀 정의들(합계 줄 등). / Cell definitions for the pinned footer (e.g. a totals row).

    footerHeight?: number

    푸터(합계) 행의 높이(px). / Footer (totals) row height (px).

    footerPosition?: "top" | "bottom"

    푸터를 아래('bottom')에 둘지 위('top')에 둘지. / Put the footer at the bottom ('bottom') or top ('top').

    formula?: FormulaOptions

    셀 수식('=A1+B2' 같은 식) 기능 세부 설정. / Cell-formula ('=A1+B2'-style) detailed options.

    frozenColumns?: number

    왼쪽부터 몇 개 컬럼을 가로 스크롤과 무관하게 고정할지. / How many leftmost columns stay pinned while scrolling horizontally.

    frozenRows?: number

    (예약) 위쪽 고정 행 수 — 아직 미구현. / (Reserved) number of top-frozen rows — not implemented yet.

    groupBy?: string[]

    처음부터 이 필드들로 행을 묶어 보여 줄지. 여러 개면 다단계 그룹이 됩니다(예: 지역 → 부서). / Which fields to group rows by from the start. Several means nested groups (e.g. region → dept).

    headerHeight?: number

    머리글(헤더) 행의 높이(px). 여러 줄 헤더면 자동으로 늘어나므로 보통은 생략. / Header row height (px). Grows automatically for multi-line headers, so usually omitted.

    height?: string | number

    그리드의 세로 크기. 숫자면 px, 문자열이면 CSS 값('60vh' 등)입니다. 가상 스크롤이 제대로 돌려면 확정된 높이가 필요하므로, 큰 데이터에서는 이 값(또는 조상 요소의 높이)을 꼭 주는 걸 권합니다. / The grid's vertical size — a number is px, a string is a CSS value ('60vh' …). Virtual scroll needs a definite height, so on large data set this (or an ancestor's height).

    history?: boolean

    (예약) 편집 실행취소 히스토리 — 아직 미구현. / (Reserved) undo history for edits — not implemented yet.

    historySize?: number

    (예약) 히스토리에 담을 최대 단계 수 — 아직 미구현. / (Reserved) max steps kept in history — not implemented yet.

    locale?: string

    UI 문자열 로케일 id. 미지정 시 전역 활성 로케일(기본 'ko') 상속 — 기존 사용자 무변화. / UI-string locale id. Falls back to the global active locale ('ko') — existing users unaffected.

    전역 활성 로케일('ko') / the global active locale ('ko')
    
    masterDetail?: MasterDetailOptions<T>

    마스터/디테일(행을 펼쳐 상세 패널 표시) 세부 설정. / Master/detail (expand a row into a detail panel) detailed options.

    mergeCells?: boolean

    셀 병합 기능 사용. / Enable cell merging.

    이 인스턴스 한정 메시지 부분 오버라이드(2단 딥머지, 카탈로그 위). 개별 라벨 옵션 > messages > 카탈로그. / Per-instance partial message override (2-level deep-merge over the catalog). Per-label option > messages > catalog.

    multiSort?: boolean

    Shift+클릭으로 여러 컬럼을 겹쳐 정렬(2차·3차 기준)하게 할지. / Whether Shift+click stacks multiple sort keys (secondary, tertiary …).

    onCellClick?: (e: CellEvent<T>) => void
    onCellDblClick?: (e: CellEvent<T>) => void
    onCellKeyDown?: (e: CellKeyEvent<T>) => void
    onCellKeyPress?: (e: CellKeyEvent<T>) => void
    onCellKeyUp?: (e: CellKeyEvent<T>) => void
    onCellMouseDown?: (e: CellEvent<T>) => void
    onCellMouseMove?: (e: CellEvent<T>) => void
    onCellMouseOut?: (e: CellEvent<T>) => void
    onCellMouseOver?: (e: CellEvent<T>) => void
    onCellMouseUp?: (e: CellEvent<T>) => void
    onColumnReorder?: (
        e: { field: string; fromIndex: number; toIndex: number },
    ) => void
    onDataChange?: (data: T[]) => void
    onDrop?: (e: DragDropEvent<T>) => void
    onEditBefore?: (e: EditEvent<T>) => boolean
    onEditEnd?: (e: EditEvent<T>) => void
    onEditStart?: (e: EditEvent<T>) => void
    onFilterChange?: (e: FilterEvent) => void
    onGridDropAfter?: (e: GridDropEvent<T>) => void

    변경후 — 양쪽 데이터 모델 이동 완료 / after phase — both data models updated

    onGridDropBefore?: (e: GridDropEvent<T>) => boolean | void

    변경전 — 이동 직전. false 반환 시 이동 취소 / before phase — just before the move; return false to cancel

    onGridDropComplete?: (e: GridDropEvent<T>) => void

    완료시 — 양쪽 재렌더까지 끝남 / complete phase — both grids re-rendered

    onGridDropMapping?: (e: GridMappingEvent<T>) => void

    interactive 매핑 모달에서 매핑 확정 시 — 생성된 매핑/스크립트 수신 / fired when the interactive mapping modal is confirmed — receives the mapping/script

    onRangeChange?: (e: RangeChangeEvent) => void

    선택된 셀 범위가 바뀔 때마다 호출(차트가 이걸 실시간으로 구독하기도 함). / Fired whenever the selected cell range changes (the chart can subscribe to it live).

    onRangeCopy?: (e: RangeCopyEvent) => void

    선택 범위를 복사(Ctrl+C)했을 때 호출. / Fired when the selected range is copied (Ctrl+C).

    onRangeFill?: (e: RangeFillEvent) => void

    채우기 핸들로 값 채우기가 확정된 뒤, 무엇이 어떻게 채워졌는지 결과를 전달. / After a fill-handle fill commits, delivers what was filled and how.

    onReady?: (grid: OpenGridInstance<T>) => void

    첫 렌더 완료 콜백. / Fired after the first render.

    onRowClick?: (e: RowEvent<T>) => void
    onRowCollapse?: (e: RowExpandEvent<T>) => void

    행 상세 패널이 접힐 때 호출. / Fired when a row's detail panel collapses.

    onRowDblClick?: (e: RowEvent<T>) => void
    onRowDrop?: (e: { fromIndex: number; toIndex: number }) => void
    onRowExpand?: (e: RowExpandEvent<T>) => void

    행 상세 패널이 펼쳐질 때 호출. / Fired when a row's detail panel expands.

    onRowMouseDown?: (e: RowEvent<T>) => void
    onRowMouseMove?: (e: RowEvent<T>) => void
    onRowMouseOut?: (e: RowEvent<T>) => void
    onRowMouseOver?: (e: RowEvent<T>) => void
    onRowMouseUp?: (e: RowEvent<T>) => void
    onScroll?: (e: ScrollEvent) => void
    onSelectionChange?: (e: SelectionEvent<T>) => void
    onSortChange?: (e: SortEvent) => void
    overrideStrict?: boolean

    override 로 감싼 함수에서 예외가 나면 어떻게 할지. 기본(true, strict)은 예외를 그대로 전파합니다. false 로 하면 경고 후 원본 함수를 실행하는 완화(fallback) 동작을 허용합니다. / What happens when an overridden layer throws. Default (true, strict) propagates the error; false permits the softer fallback that warns then runs the original.

    pageSize?: number

    한 페이지에 몇 행을 보일지. / How many rows show per page.

    pagination?: boolean

    아래쪽 페이지 이동 바를 띄울지. / Whether to show the pagination bar at the bottom.

    rangeSelection?: RangeSelectionOptions

    범위 선택 + 채우기 핸들(엑셀식 드래그 채우기) 세부 설정. / Range selection + fill handle (Excel-style drag-fill) detailed options.

    rowHeight?: number

    데이터 행 한 줄의 세로 픽셀 높이. 촘촘하게 많이 보이려면 줄이고, 터치·가독성 위주면 키웁니다. 가상 스크롤이 이 값으로 "화면에 몇 행이 들어갈지"를 계산합니다. 기본 32. / Height in px of one data row. Lower it to pack more rows in; raise it for touch/readability. Virtual scroll uses this to compute how many rows fit on screen. Default 32.

    rowNumber?: boolean

    맨 왼쪽에 1,2,3… 행 번호 컬럼을 붙일지. / Whether to add a leftmost 1,2,3… row-number column.

    selection?: SelectionMode

    사용자가 무엇을 선택할 수 있는지. 'cells' 로 하면 스프레드시트식 범위 선택이 됩니다. / What the user can select. 'cells' enables spreadsheet-style range selection.

    skin?: string

    스킨 (FORM 축, R12b) — data-og-skin. 미지정 시 'default'(오늘과 byte-identical). / Skin (FORM axis, R12b) — data-og-skin. Default 'default' (byte-identical to stock look).

    sortable?: boolean

    머리글 클릭 정렬을 그리드 전체에서 켤지. 컬럼별 sortable 로 예외를 둘 수 있습니다. / Turn header-click sorting on grid-wide. Per-column sortable can override.

    stateColumn?: boolean

    각 행이 추가/수정/삭제 중 어떤 상태인지 표시하는 컬럼을 붙일지(편집 추적용). / Whether to add a column showing each row's added/edited/removed state (for change tracking).

    summary?: SummaryOptions

    각 그룹에 소계/합계 요약 행을 붙이는 설정. / Options for attaching subtotal/summary rows to each group.

    texture?: string

    배경 질감(패턴) 이름. 셀 배경에 무늬만 입힙니다. 지정하지 않으면 아무 것도 바뀌지 않습니다. / The background texture (pattern) name — paints a pattern on cell backgrounds. Unset changes nothing.

    theme?: string

    색 테마 id(data-og-theme). / Color theme id (data-og-theme).

    tooltips?: boolean

    true 면 모든 셀에 마우스를 올렸을 때 그 값이 브라우저 기본 툴팁으로 뜹니다. 컬럼의 tooltip 설정이 있으면 그쪽이 우선. / true shows every cell's value as a native browser tooltip on hover; a column's own tooltip wins.

    treeId?: string

    flat 트리에서 각 행의 고유 id 가 담긴 필드 이름. / In flat tree mode, the field holding each row's unique id.

    treeMode?: "flat" | "auto"

    트리(계층) 데이터를 어떤 모양으로 받을지. 'auto'=각 행이 children 배열로 자식을 품은 중첩 구조, 'flat'=모든 행이 한 줄이고 id/부모id 로 관계를 표현하는 평면 구조. / How hierarchical data is shaped. 'auto' = each row nests its children in a children array; 'flat' = every row is a flat entry linked by id / parent-id.

    treeParentId?: string

    flat 트리에서 부모 행의 id 가 담긴 필드 이름. / In flat tree mode, the field holding the parent row's id.

    width?: string | number

    그리드의 가로 크기. 숫자면 px, 문자열이면 CSS 값. 생략 시 부모 폭을 채웁니다. / The grid's horizontal size — number = px, string = CSS. Unset fills the parent width.

    worksheets?: WorksheetDef<any>[]

    엑셀처럼 하단 탭으로 여러 시트를 전환하는 워크시트 정의들. / Worksheet definitions — Excel-like bottom tabs switching between multiple sheets.