Interface GridOptions<T>

그리드 생성 옵션.

Grid construction options.

グリッドの生成オプション。

表格的生成选项。

new OpenGrid(container, options) 의 두 번째 인자. columns 만 필수.

Second argument of new OpenGrid(container, options). Only columns is required.

new OpenGrid(container, options) の第 2 引数。columns のみ必須。

new OpenGrid(container, options) 的第二个参数。仅 columns 必填。

Example

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? autoHeight? calcPrecision? chart? checkColumn? clipboard? columnReorder? columns conditionalFormat? contextMenu? crossGrid? crossGridMapping? cssVars? defaultColumnWidth? defaultSort? density? draggable? editable? editMode? expandOnLoad? fallbackViewportHeight? fillWidth? filterable? footer? footerHeight? footerPosition? formula? frozenColumns? frozenRows? groupBy? headerHeight? height? history? historySize? locale? masterDetail? mergeCells? messages? multiSort? onCellClick? onCellDblClick? onCellKeyDown? onCellKeyPress? onCellKeyUp? onCellMouseDown? onCellMouseMove? onCellMouseOut? onCellMouseOver? onCellMouseUp? onColumnReorder? onDataChange? onDrop? onEditBefore? onEditEnd? onEditStart? onFilterChange? onGridDropAfter? onGridDropBefore? onGridDropComplete? onGridDropMapping? onRangeChange? onRangeCopy? onRangeFill? onReady? onRowClick? onRowCollapse? onRowDblClick? onRowDrop? onRowExpand? onRowMouseDown? onRowMouseMove? onRowMouseOut? onRowMouseOver? onRowMouseUp? onScroll? onSelectionChange? onSortChange? overrideStrict? pageSize? pagination? rangeSelection? rowHeight? rowNumber? selection? skin? sortable? stateColumn? summary? texture? theme? tooltips? treeId? treeMode? treeParentId? width? worksheets?

Properties

`Optional`ariaLabel

ariaLabel?: string

그리드 컨테이너 aria-label.

aria-label of the grid container.

グリッドコンテナーの aria-label。

表格容器的 aria-label。

`Optional`autoHeight

autoHeight?: boolean

셀 내용이 길어 줄바꿈될 때 행 높이를 내용에 맞춰 자동으로 늘립니다. 컬럼의 wrap 과 함께 씁니다.

Auto-grow a row's height to fit wrapped content. Use together with a column's wrap.

セルの内容が長くて折り返されるとき、行の高さを内容に合わせて自動的に伸ばします。列の wrap と一緒に使います。

单元格内容过长而换行时，让行高随内容自动增高。与列的 wrap 配合使用。

`Optional`calcPrecision

calcPrecision?: number

수식·집계 계산에 쓸 기본 소수점 정밀도. 기본 10.

Default decimal precision for formulas/aggregation. Default 10.

数式・集計の計算に使う既定の小数点精度。既定値は 10。

公式、汇总计算所用的默认小数精度。默认 10。

`Optional`chart

chart?: ChartGlobalOptions

그리드 데이터를 그대로 쓰는 통합 차트 세부 설정.

Detailed options for the chart integrated on the grid's own data.

グリッドのデータをそのまま使う統合チャートの詳細設定。

直接使用表格数据的集成图表的详细设置。

`Optional`checkColumn

checkColumn?: boolean

행 선택용 체크박스 컬럼을 붙일지.

Whether to add a checkbox column for selecting rows.

行選択用のチェックボックス列を付けるか。

是否添加用于选择行的复选框列。

`Optional`clipboard

clipboard?: boolean

Ctrl+C / Ctrl+V 로 셀 값을 복사·붙여넣기하게 할지.

Whether Ctrl+C / Ctrl+V copy-paste of cell values is enabled.

Ctrl+C / Ctrl+V でセルの値をコピー・貼り付けできるようにするか。

是否允许用 Ctrl+C / Ctrl+V 复制、粘贴单元格的值。

`Optional`columnReorder

columnReorder?: boolean

머리글을 드래그해 컬럼 순서를 바꾸게 할지.

Whether headers can be dragged to reorder columns.

見出しをドラッグして列の順序を変えられるようにするか。

是否允许拖拽表头来改变列的顺序。

columns

columns: ColumnDef<T>[]

컬럼 정의 배열(필수).

Column definitions (required).

列定義の配列（必須）。

列定义数组（必填）。

`Optional`conditionalFormat

conditionalFormat?: CFRule[]

조건부 서식 규칙 목록(값에 따라 셀을 데이터바·색조·아이콘으로 강조). 지정하지 않으면 아무 것도 바뀌지 않습니다.

Conditional-format rules — highlight cells by value with data-bars, color scales, or icon sets. Unset changes nothing.

条件付き書式のルール一覧（値に応じてセルをデータバー・カラースケール・アイコンで強調）。指定しなければ何も変わりません。

条件格式规则列表（按值用数据条、色阶、图标强调单元格）。不指定则不改变任何内容。

`Optional`contextMenu

contextMenu?: boolean | ContextMenuItem[]

우클릭 컨텍스트 메뉴. true=기본 메뉴, false=끔, 배열=직접 정한 항목들.

Right-click context menu — true = default menu, false = off, array = your own items.

右クリックのコンテキストメニュー。true=既定メニュー、false=オフ、配列=自分で決めた項目。

右键上下文菜单。true=默认菜单，false=关闭，数组=自行指定的项目。

`Optional`crossGrid

crossGrid?: boolean

그리드↔그리드 행 드래그 이동 허용 (draggable:true 와 함께 사용, 양쪽 그리드 모두 true 여야 이동)

Enable grid-to-grid row drag (use with draggable:true; both grids must be true)

グリッド↔グリッドの行ドラッグ移動を許可（draggable:true と併用、両方のグリッドが true でないと移動しない）

允许表格↔表格的行拖拽移动（与 draggable:true 配合使用，两侧表格都为 true 才能移动）

`Optional`crossGridMapping

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

크로스그리드 이동 시 소스→타깃 행 변환 방식.

'auto'(기본): 필드명 그대로 복사
'interactive': 소스/타깃 스키마가 다르면 매핑 모달을 띄워 개발자가 매칭 + 변환 스크립트 출력
함수: (srcRow) => targetRow 로 직접 변환 (모달 없이 baking)

How source rows are transformed on cross-grid moves.

'auto' (default): copy by matching field names
'interactive': show a mapping modal when schemas differ, emitting a transform script
function: transform directly without the modal

クロスグリッド移動時のソース→ターゲット行の変換方式。

'auto'（既定）: フィールド名そのままコピー
'interactive': ソース／ターゲットのスキーマが異なればマッピングモーダルを表示して開発者がマッチング＋変換スクリプトを出力
関数: (srcRow) => targetRow で直接変換（モーダルなしで baking）

跨表格移动时源行→目标行的转换方式。

'auto'（默认）: 按字段名原样复制
'interactive': 源／目标结构不同时弹出映射对话框，由开发者匹配并输出转换脚本
函数: 以 (srcRow) => targetRow 直接转换（不弹对话框，直接 baking）

`Optional`cssVars

cssVars?: Record<string, string>

컨테이너에 주입할 CSS 변수 맵.

CSS custom properties injected on the container.

コンテナーに注入する CSS 変数のマップ。

注入到容器的 CSS 变量映射。

`Optional`defaultColumnWidth

defaultColumnWidth?: number

width 도 flex 도 안 준 컬럼에 적용할 기본 폭(px).

Fallback width (px) for columns given neither width nor flex.

width も flex も指定していない列に適用する既定の幅（px）。

对既未指定 width 也未指定 flex 的列所应用的默认宽度（px）。

`Optional`defaultSort

defaultSort?: SortItem[]

처음 로드될 때 미리 적용해 둘 정렬 상태.

The sort state to apply up front on first load.

最初に読み込まれるときにあらかじめ適用しておく並べ替えの状態。

首次加载时预先应用的排序状态。

`Optional`density

density?: string

행 간격(밀도) 이름. 촘촘·보통·여유처럼 행 높이와 여백을 통째로 바꿉니다. 지정하지 않으면 아무 것도 바뀌지 않습니다.

The row-spacing (density) name — compact/normal/roomy row heights and paddings. Unset changes nothing.

行間隔（密度）の名前。詰め・普通・ゆとりのように行の高さと余白をまとめて変えます。指定しなければ何も変わりません。

行间距（密度）的名称。像紧凑、普通、宽松那样，把行高和内边距整体改变。不指定则不改变任何内容。

`Optional`draggable

draggable?: boolean

행을 드래그해 순서를 바꾸게 할지.

Whether rows can be dragged to reorder.

行をドラッグして順序を変えられるようにするか。

是否允许拖拽行来改变顺序。

`Optional`editable

editable?: boolean

그리드 전체의 편집 스위치. 켜져 있고 컬럼의 editable 도 참일 때만 실제로 편집이 열립니다(둘 다 참 조건).

The grid-wide edit switch. Editing opens only when this AND a column's editable are true.

グリッド全体の編集スイッチ。オンで、かつ列の editable も真のときだけ実際に編集が開きます（両方が真という条件）。

表格全局的编辑开关。只有该开关打开、且列的 editable 也为真时，编辑才真正开启（两者皆真的条件）。

`Optional`editMode

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

편집을 어떻게 시작할지. 'click'=한 번 클릭, 'dblclick'=더블클릭, 'none'=마우스로는 진입 불가(API 로만).

How editing starts — 'click' single click, 'dblclick' double click, 'none' no mouse entry (API only).

編集をどう開始するか。'click'=一度クリック、'dblclick'=ダブルクリック、'none'=マウスでは入れない（API のみ）。

如何开始编辑。'click'=单击一次，'dblclick'=双击，'none'=无法用鼠标进入（仅 API）。

`Optional`expandOnLoad

expandOnLoad?: boolean

로드하자마자 모든 노드를 펼쳐 둘지.

Whether to expand every node right after loading.

読み込んだ直後にすべてのノードを展開しておくか。

是否在加载后立即展开所有节点。

`Optional`fallbackViewportHeight

fallbackViewportHeight?: number

뷰포트 안전장치(옵트인, 기본 undefined = OFF = 기존 동작 완전 불변).

호스트가 그리드 컨테이너 조상 체인에 확정 높이(definite height)를 주지 않으면 내부 스페이서(totalRows×rowHeight)가 컨테이너를 전체 콘텐츠 크기로 늘리고, ResizeObserver 되먹임으로 windowing 이 무력화되어 전 행이 DOM 렌더되는 폭주가 발생한다 (대량 데이터일수록 재앙적). 이 값을 지정하면, 컨테이너가 전 콘텐츠를 다 담는 "언바운드" 상태로 감지될 때에 한해 윈도잉 뷰포트 높이를 이 값(px)으로 클램프해 폭주를 차단한다. 정상적으로 확정 높이가 있는 바운드 컨테이너에는 영향이 없다. 1순위 권장은 컨테이너/그리드에 확정 height 를 주는 것이며, 이 옵션은 안전망이다.

Viewport safety net (opt-in; default undefined = OFF = behavior fully unchanged).

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.

ビューポートの安全装置（オプトイン、既定 undefined = OFF = 既存動作は完全に不変）。

ホストがグリッドコンテナーの祖先チェーンに確定高さ（definite height）を与えないと、内部スペーサー（totalRows×rowHeight）がコンテナーを全コンテンツのサイズまで伸ばし、 ResizeObserver のフィードバックで windowing が無効化されて全行が DOM レンダリングされる暴走が発生する（大量データほど破滅的）。この値を指定すると、コンテナーが全コンテンツを収める「アンバウンド」状態として検出されたときに限り、ウィンドウイングのビューポート高さをこの値（px）にクランプして暴走を遮断する。正常に確定高さがあるバウンドコンテナーには影響がない。第 1 に推奨するのはコンテナー／グリッドに確定 height を与えることであり、このオプションは安全網である。

视口安全装置（选择性启用，默认 undefined = OFF = 现有行为完全不变）。

宿主若未在表格容器的祖先链上给出确定高度（definite height），内部占位元素（totalRows×rowHeight）会把容器撑到全部内容的大小，ResizeObserver 的反馈又会令 windowing 失效，导致所有行都渲染进 DOM 的失控（数据量越大越是灾难）。指定此值后，仅当容器被检测为装下全部内容的「无界」状态时，才把 windowing 的视口高度钳制到该值（px），以阻断失控。对正常具有确定高度的有界容器没有影响。首选做法是给容器／表格一个确定的 height，此选项只是安全网。

`Optional`fillWidth

fillWidth?: boolean

컬럼 폭의 합이 컨테이너를 꽉 채우도록 늘립니다. 오른쪽에 빈 공간을 남기고 싶지 않을 때.

Stretch column widths so their sum fills the container — when you don't want empty space on the right.

列幅の合計がコンテナーいっぱいになるように伸ばします。右側に空きを残したくないときに。

拉伸列宽，使其总和填满容器。适用于不想在右侧留白的场景。

`Optional`filterable

filterable?: boolean

필터 기능을 그리드 전체에서 켤지. 컬럼별 filterable 로 예외를 둘 수 있습니다.

Turn filtering on grid-wide. Per-column filterable can override.

フィルター機能をグリッド全体で有効にするか。列ごとの filterable で例外を設けられます。

是否在表格全局启用过滤功能。可用各列的 filterable 设置例外。

`Optional`footer

footer?: FooterDef[]

아래(또는 위) 고정 푸터에 넣을 셀 정의들(합계 줄 등).

Cell definitions for the pinned footer (e.g. a totals row).

下（または上）の固定フッターに入れるセル定義（合計行など）。

放入底部（或顶部）固定页脚的单元格定义（合计行等）。

`Optional`footerHeight

footerHeight?: number

푸터(합계) 행의 높이(px).

Footer (totals) row height (px).

フッター（合計）行の高さ（px）。

页脚（合计）行的高度（px）。

`Optional`footerPosition

footerPosition?: "top" | "bottom"

푸터를 아래('bottom')에 둘지 위('top')에 둘지.

Put the footer at the bottom ('bottom') or top ('top').

フッターを下（'bottom'）に置くか上（'top'）に置くか。

把页脚放在下方（'bottom'）还是上方（'top'）。

`Optional`formula

formula?: FormulaOptions

셀 수식('=A1+B2' 같은 식) 기능 세부 설정.

Cell-formula ('=A1+B2'-style) detailed options.

セル数式（'=A1+B2' のような式）機能の詳細設定。

单元格公式（'=A1+B2' 这类算式）功能的详细设置。

`Optional`frozenColumns

frozenColumns?: number

왼쪽부터 몇 개 컬럼을 가로 스크롤과 무관하게 고정할지.

How many leftmost columns stay pinned while scrolling horizontally.

左から何列を横スクロールと無関係に固定するか。

从左侧起固定多少列，使其不随横向滚动移动。

`Optional`frozenRows

frozenRows?: number

(예약) 위쪽 고정 행 수 — 아직 미구현.

(Reserved) number of top-frozen rows — not implemented yet.

（予約）上部固定行の数 — まだ未実装。

（保留）顶部固定行的数量 — 尚未实现。

`Optional`groupBy

groupBy?: string[]

처음부터 이 필드들로 행을 묶어 보여 줄지. 여러 개면 다단계 그룹이 됩니다(예: 지역 → 부서).

Which fields to group rows by from the start. Several means nested groups (e.g. region → dept).

最初からこれらのフィールドで行をまとめて見せるか。複数なら多段グループになります（例: 地域 → 部署）。

一开始就按这些字段把行分组显示。多个字段则形成多级分组（例: 地区 → 部门）。

`Optional`headerHeight

headerHeight?: number

머리글(헤더) 행의 높이(px). 여러 줄 헤더면 자동으로 늘어나므로 보통은 생략.

Header row height (px). Grows automatically for multi-line headers, so usually omitted.

見出し（ヘッダー）行の高さ（px）。複数行ヘッダーなら自動で伸びるので、通常は省略。

表头行的高度（px）。多行表头会自动增高，通常省略。

`Optional`height

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).

グリッドの縦のサイズ。数値なら px、文字列なら CSS 値（'60vh' など）です。仮想スクロールがきちんと動くには確定した高さが必要なので、大きなデータではこの値（または祖先要素の高さ）を必ず指定することをおすすめします。

表格的纵向尺寸。数字为 px，字符串为 CSS 值（'60vh' 等）。虚拟滚动需要确定的高度才能正常工作，因此数据量大时务必指定此值（或祖先元素的高度）。

`Optional`history

history?: boolean

(예약) 편집 실행취소 히스토리 — 아직 미구현.

(Reserved) undo history for edits — not implemented yet.

（予約）編集の取り消し履歴 — まだ未実装。

（保留）编辑的撤销历史 — 尚未实现。

`Optional`historySize

historySize?: number

(예약) 히스토리에 담을 최대 단계 수 — 아직 미구현.

(Reserved) max steps kept in history — not implemented yet.

（予約）履歴に保持する最大ステップ数 — まだ未実装。

（保留）历史中保留的最大步数 — 尚未实现。

`Optional`locale

locale?: string

UI 문자열 로케일 id. 미지정 시 전역 활성 로케일(기본 'ko') 상속 — 기존 사용자 무변화.

UI-string locale id. Falls back to the global active locale ('ko') — existing users unaffected.

UI 文字列のロケール id。未指定時はグローバルの有効ロケール（既定 'ko'）を継承 — 既存ユーザーに変化なし。

UI 文本的区域设置 id。未指定时继承全局生效的区域设置（默认 'ko'） — 现有用户不受影响。

Default Value

전역 활성 로케일('ko')

the global active locale ('ko')

グローバルの有効ロケール（'ko'）

全局生效的区域设置（'ko'）

`Optional`masterDetail

masterDetail?: MasterDetailOptions<T>

마스터/디테일(행을 펼쳐 상세 패널 표시) 세부 설정.

Master/detail (expand a row into a detail panel) detailed options.

マスター／ディテール（行を展開して詳細パネルを表示）の詳細設定。

主从（展开行显示详情面板）的详细设置。

`Optional`mergeCells

mergeCells?: boolean

셀 병합 기능 사용.

Enable cell merging.

セル結合機能を使用。

启用单元格合并功能。

`Optional`messages

messages?: PartialLocaleMessages

이 인스턴스 한정 메시지 부분 오버라이드(2단 딥머지, 카탈로그 위). 개별 라벨 옵션 > messages > 카탈로그.

Per-instance partial message override (2-level deep-merge over the catalog). Per-label option > messages > catalog.

このインスタンス限定のメッセージ部分オーバーライド（2 段ディープマージ、カタログの上）。個別ラベルオプション > messages > カタログ。

仅限本实例的消息部分覆盖（两级深合并，叠加在目录之上）。单独标签选项 > messages > 目录。

`Optional`multiSort

multiSort?: boolean

Shift+클릭으로 여러 컬럼을 겹쳐 정렬(2차·3차 기준)하게 할지.

Whether Shift+click stacks multiple sort keys (secondary, tertiary …).

Shift+クリックで複数の列を重ねて並べ替える（第 2・第 3 基準）ようにするか。

是否允许 Shift+单击叠加多列排序（第二、第三基准）。

`Optional`onCellClick

onCellClick?: (e: CellEvent<T>) => void

`Optional`onCellDblClick

onCellDblClick?: (e: CellEvent<T>) => void

`Optional`onCellKeyDown

onCellKeyDown?: (e: CellKeyEvent<T>) => void

`Optional`onCellKeyPress

onCellKeyPress?: (e: CellKeyEvent<T>) => void

`Optional`onCellKeyUp

onCellKeyUp?: (e: CellKeyEvent<T>) => void

`Optional`onCellMouseDown

onCellMouseDown?: (e: CellEvent<T>) => void

`Optional`onCellMouseMove

onCellMouseMove?: (e: CellEvent<T>) => void

`Optional`onCellMouseOut

onCellMouseOut?: (e: CellEvent<T>) => void

`Optional`onCellMouseOver

onCellMouseOver?: (e: CellEvent<T>) => void

`Optional`onCellMouseUp

onCellMouseUp?: (e: CellEvent<T>) => void

`Optional`onColumnReorder

onColumnReorder?: (
e: { field: string; fromIndex: number; toIndex: number },
) => void

`Optional`onDataChange

onDataChange?: (data: T[]) => void

`Optional`onDrop

onDrop?: (e: DragDropEvent<T>) => void

`Optional`onEditBefore

onEditBefore?: (e: EditEvent<T>) => boolean

`Optional`onEditEnd

onEditEnd?: (e: EditEvent<T>) => void

`Optional`onEditStart

onEditStart?: (e: EditEvent<T>) => void

`Optional`onFilterChange

onFilterChange?: (e: FilterEvent) => void

`Optional`onGridDropAfter

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

변경후 — 양쪽 데이터 모델 이동 완료

after phase — both data models updated

変更後 — 両側のデータモデルの移動が完了

变更后 — 两侧数据模型的移动已完成

`Optional`onGridDropBefore

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

변경전 — 이동 직전. false 반환 시 이동 취소

before phase — just before the move; return false to cancel

変更前 — 移動の直前。false を返すと移動をキャンセル

变更前 — 移动的紧前。返回 false 则取消移动

`Optional`onGridDropComplete

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

완료시 — 양쪽 재렌더까지 끝남

complete phase — both grids re-rendered

完了時 — 両側の再レンダリングまで終了

完成时 — 两侧的重新渲染也已结束

`Optional`onGridDropMapping

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

interactive 매핑 모달에서 매핑 확정 시 — 생성된 매핑/스크립트 수신

fired when the interactive mapping modal is confirmed — receives the mapping/script

interactive マッピングモーダルでマッピングが確定したとき — 生成されたマッピング／スクリプトを受信

在 interactive 映射对话框中确定映射时 — 接收生成的映射／脚本

`Optional`onRangeChange

onRangeChange?: (e: RangeChangeEvent) => void

선택된 셀 범위가 바뀔 때마다 호출(차트가 이걸 실시간으로 구독하기도 함).

Fired whenever the selected cell range changes (the chart can subscribe to it live).

選択されたセル範囲が変わるたびに呼び出し（チャートがこれをリアルタイムで購読することもある）。

每当选中的单元格区域变化时调用（图表也可能实时订阅它）。

`Optional`onRangeCopy

onRangeCopy?: (e: RangeCopyEvent) => void

선택 범위를 복사(Ctrl+C)했을 때 호출.

Fired when the selected range is copied (Ctrl+C).

選択範囲をコピー（Ctrl+C）したときに呼び出し。

复制选中区域（Ctrl+C）时调用。

`Optional`onRangeFill

onRangeFill?: (e: RangeFillEvent) => void

채우기 핸들로 값 채우기가 확정된 뒤, 무엇이 어떻게 채워졌는지 결과를 전달.

After a fill-handle fill commits, delivers what was filled and how.

フィルハンドルでの値の入力が確定した後、何がどう入力されたかの結果を伝達。

填充柄填值确定后，传递填了什么、如何填的结果。

`Optional`onReady

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

첫 렌더 완료 콜백.

Fired after the first render.

初回レンダリング完了のコールバック。

首次渲染完成的回调。

`Optional`onRowClick

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

`Optional`onRowCollapse

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

행 상세 패널이 접힐 때 호출.

Fired when a row's detail panel collapses.

行の詳細パネルが折りたたまれるときに呼び出し。

行的详情面板折叠时调用。

`Optional`onRowDblClick

onRowDblClick?: (e: RowEvent<T>) => void

`Optional`onRowDrop

onRowDrop?: (e: { fromIndex: number; toIndex: number }) => void

`Optional`onRowExpand

onRowExpand?: (e: RowExpandEvent<T>) => void

행 상세 패널이 펼쳐질 때 호출.

Fired when a row's detail panel expands.

行の詳細パネルが展開されるときに呼び出し。

行的详情面板展开时调用。

`Optional`onRowMouseDown

onRowMouseDown?: (e: RowEvent<T>) => void

`Optional`onRowMouseMove

onRowMouseMove?: (e: RowEvent<T>) => void

`Optional`onRowMouseOut

onRowMouseOut?: (e: RowEvent<T>) => void

`Optional`onRowMouseOver

onRowMouseOver?: (e: RowEvent<T>) => void

`Optional`onRowMouseUp

onRowMouseUp?: (e: RowEvent<T>) => void

`Optional`onScroll

onScroll?: (e: ScrollEvent) => void

`Optional`onSelectionChange

onSelectionChange?: (e: SelectionEvent<T>) => void

`Optional`onSortChange

onSortChange?: (e: SortEvent) => void

`Optional`overrideStrict

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.

override で包んだ関数で例外が出たときどうするか。既定（true、strict）は例外をそのまま伝播します。 false にすると、警告のうえ元の関数を実行する緩和（fallback）動作を許可します。

用 override 包裹的函数抛出异常时如何处理。默认（true、strict）原样向上传播异常。设为 false 则允许先告警再执行原函数的宽松（fallback）行为。

`Optional`pageSize

pageSize?: number

한 페이지에 몇 행을 보일지.

How many rows show per page.

1 ページに何行を表示するか。

每页显示多少行。

`Optional`pagination

pagination?: boolean

아래쪽 페이지 이동 바를 띄울지.

Whether to show the pagination bar at the bottom.

下部のページ移動バーを表示するか。

是否显示底部的分页栏。

`Optional`rangeSelection

rangeSelection?: RangeSelectionOptions

범위 선택 + 채우기 핸들(엑셀식 드래그 채우기) 세부 설정.

Range selection + fill handle (Excel-style drag-fill) detailed options.

範囲選択＋フィルハンドル（Excel 式のドラッグ入力）の詳細設定。

区域选择 + 填充柄（Excel 式拖拽填充）的详细设置。

`Optional`rowHeight

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.

データ行 1 行の縦のピクセル高さ。詰めて多く見せたいなら小さく、タッチ・可読性重視なら大きくします。仮想スクロールはこの値で「画面に何行入るか」を計算します。既定値は 32。

一行数据的纵向像素高度。想紧凑地多显示就调小，重视触摸和可读性就调大。虚拟滚动用这个值计算「屏幕能容纳多少行」。默认 32。

`Optional`rowNumber

rowNumber?: boolean

맨 왼쪽에 1,2,3… 행 번호 컬럼을 붙일지.

Whether to add a leftmost 1,2,3… row-number column.

左端に 1,2,3… の行番号列を付けるか。

是否在最左侧添加 1,2,3… 的行号列。

`Optional`selection

selection?: SelectionMode

사용자가 무엇을 선택할 수 있는지. 'cells' 로 하면 스프레드시트식 범위 선택이 됩니다.

What the user can select. 'cells' enables spreadsheet-style range selection.

ユーザーが何を選択できるか。'cells' にするとスプレッドシート式の範囲選択になります。

用户能选择什么。设为 'cells' 即为电子表格式的区域选择。

`Optional`skin

skin?: string

스킨 (FORM 축, R12b) — data-og-skin. 미지정 시 'default'(오늘과 byte-identical).

Skin (FORM axis, R12b) — data-og-skin. Default 'default' (byte-identical to stock look).

スキン（FORM 軸、R12b） — data-og-skin。未指定時は 'default'（現状と byte-identical）。

皮肤（FORM 轴、R12b） — data-og-skin。未指定时为 'default'（与现状 byte-identical）。

`Optional`sortable

sortable?: boolean

머리글 클릭 정렬을 그리드 전체에서 켤지. 컬럼별 sortable 로 예외를 둘 수 있습니다.

Turn header-click sorting on grid-wide. Per-column sortable can override.

見出しクリックでの並べ替えをグリッド全体で有効にするか。列ごとの sortable で例外を設けられます。

是否在表格全局启用点击表头排序。可用各列的 sortable 设置例外。

`Optional`stateColumn

stateColumn?: boolean

각 행이 추가/수정/삭제 중 어떤 상태인지 표시하는 컬럼을 붙일지(편집 추적용).

Whether to add a column showing each row's added/edited/removed state (for change tracking).

各行が追加／修正／削除のどの状態かを表示する列を付けるか（編集追跡用）。

是否添加一列显示各行处于新增／修改／删除中的哪种状态（用于编辑追踪）。

`Optional`summary

summary?: SummaryOptions

각 그룹에 소계/합계 요약 행을 붙이는 설정.

Options for attaching subtotal/summary rows to each group.

各グループに小計／合計の要約行を付ける設定。

为各分组添加小计／合计汇总行的设置。

`Optional`texture

texture?: string

배경 질감(패턴) 이름. 셀 배경에 무늬만 입힙니다. 지정하지 않으면 아무 것도 바뀌지 않습니다.

The background texture (pattern) name — paints a pattern on cell backgrounds. Unset changes nothing.

背景の質感（パターン）の名前。セルの背景に模様だけを付けます。指定しなければ何も変わりません。

背景质感（图案）的名称。只在单元格背景上加花纹。不指定则不改变任何内容。

`Optional`theme

theme?: string

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

Color theme id (data-og-theme).

色テーマの id（data-og-theme）。

颜色主题 id（data-og-theme）。

`Optional`tooltips

tooltips?: boolean

true 면 모든 셀에 마우스를 올렸을 때 그 값이 브라우저 기본 툴팁으로 뜹니다. 컬럼의 tooltip 설정이 있으면 그쪽이 우선.

true shows every cell's value as a native browser tooltip on hover; a column's own tooltip wins.

true にすると、すべてのセルにマウスを乗せたときその値がブラウザー標準のツールチップで表示されます。列の tooltip 設定があればそちらが優先。

true 时，鼠标悬停在任意单元格上都会以浏览器原生提示显示该值。若列自身有 tooltip 设置，则以列的为准。

`Optional`treeId

treeId?: string

flat 트리에서 각 행의 고유 id 가 담긴 필드 이름.

In flat tree mode, the field holding each row's unique id.

flat ツリーで、各行の固有 id が入っているフィールド名。

flat 树中存放各行唯一 id 的字段名。

`Optional`treeMode

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.

ツリー（階層）データをどんな形で受け取るか。'auto'=各行が children 配列で子を抱える入れ子構造、 'flat'=すべての行が 1 行で id／親 id により関係を表す平面構造。

以何种形态接收树（层级）数据。'auto'=每行用 children 数组容纳子级的嵌套结构， 'flat'=所有行都是一条记录、以 id／父 id 表达关系的扁平结构。

`Optional`treeParentId

treeParentId?: string

flat 트리에서 부모 행의 id 가 담긴 필드 이름.

In flat tree mode, the field holding the parent row's id.

flat ツリーで、親行の id が入っているフィールド名。

flat 树中存放父行 id 的字段名。

`Optional`width

width?: string | number

그리드의 가로 크기. 숫자면 px, 문자열이면 CSS 값. 생략 시 부모 폭을 채웁니다.

The grid's horizontal size — number = px, string = CSS. Unset fills the parent width.

グリッドの横のサイズ。数値なら px、文字列なら CSS 値。省略時は親の幅を埋めます。

表格的横向尺寸。数字为 px，字符串为 CSS 值。省略时填满父元素的宽度。

`Optional`worksheets

worksheets?: WorksheetDef<any>[]

엑셀처럼 하단 탭으로 여러 시트를 전환하는 워크시트 정의들.

Worksheet definitions — Excel-like bottom tabs switching between multiple sheets.

Excel のように下部タブで複数シートを切り替えるワークシート定義。

像 Excel 那样用底部标签在多个工作表间切换的工作表定义。

Interface GridOptions<T>

Example

Type Parameters

Index

Properties

Properties

OptionalariaLabel

OptionalautoHeight

OptionalcalcPrecision

Optionalchart

OptionalcheckColumn

Optionalclipboard

OptionalcolumnReorder

columns

OptionalconditionalFormat

OptionalcontextMenu

OptionalcrossGrid

OptionalcrossGridMapping

OptionalcssVars

OptionaldefaultColumnWidth

OptionaldefaultSort

Optionaldensity

Optionaldraggable

Optionaleditable

OptionaleditMode

OptionalexpandOnLoad

OptionalfallbackViewportHeight

OptionalfillWidth

Optionalfilterable

Optionalfooter

OptionalfooterHeight

OptionalfooterPosition

Optionalformula

OptionalfrozenColumns

OptionalfrozenRows

OptionalgroupBy

OptionalheaderHeight

Optionalheight

Optionalhistory

OptionalhistorySize

Optionallocale

Default Value

OptionalmasterDetail

OptionalmergeCells

Optionalmessages

OptionalmultiSort

OptionalonCellClick

OptionalonCellDblClick

OptionalonCellKeyDown

OptionalonCellKeyPress

OptionalonCellKeyUp

OptionalonCellMouseDown

OptionalonCellMouseMove

OptionalonCellMouseOut

OptionalonCellMouseOver

OptionalonCellMouseUp

OptionalonColumnReorder

OptionalonDataChange

OptionalonDrop

OptionalonEditBefore

OptionalonEditEnd

OptionalonEditStart

OptionalonFilterChange

OptionalonGridDropAfter

OptionalonGridDropBefore

OptionalonGridDropComplete

OptionalonGridDropMapping

OptionalonRangeChange

OptionalonRangeCopy

OptionalonRangeFill

OptionalonReady

OptionalonRowClick

OptionalonRowCollapse

OptionalonRowDblClick

OptionalonRowDrop

OptionalonRowExpand

OptionalonRowMouseDown

OptionalonRowMouseMove

OptionalonRowMouseOut

OptionalonRowMouseOver

`Optional`ariaLabel

`Optional`autoHeight

`Optional`calcPrecision

`Optional`chart

`Optional`checkColumn

`Optional`clipboard

`Optional`columnReorder

`Optional`conditionalFormat

`Optional`contextMenu

`Optional`crossGrid

`Optional`crossGridMapping

`Optional`cssVars

`Optional`defaultColumnWidth

`Optional`defaultSort

`Optional`density

`Optional`draggable

`Optional`editable

`Optional`editMode

`Optional`expandOnLoad

`Optional`fallbackViewportHeight

`Optional`fillWidth

`Optional`filterable

`Optional`footer

`Optional`footerHeight

`Optional`footerPosition

`Optional`formula

`Optional`frozenColumns

`Optional`frozenRows

`Optional`groupBy

`Optional`headerHeight

`Optional`height

`Optional`history

`Optional`historySize

`Optional`locale

`Optional`masterDetail

`Optional`mergeCells

`Optional`messages

`Optional`multiSort

`Optional`onCellClick

`Optional`onCellDblClick

`Optional`onCellKeyDown

`Optional`onCellKeyPress

`Optional`onCellKeyUp

`Optional`onCellMouseDown

`Optional`onCellMouseMove

`Optional`onCellMouseOut

`Optional`onCellMouseOver

`Optional`onCellMouseUp

`Optional`onColumnReorder

`Optional`onDataChange

`Optional`onDrop

`Optional`onEditBefore

`Optional`onEditEnd

`Optional`onEditStart

`Optional`onFilterChange

`Optional`onGridDropAfter

`Optional`onGridDropBefore

`Optional`onGridDropComplete

`Optional`onGridDropMapping

`Optional`onRangeChange

`Optional`onRangeCopy

`Optional`onRangeFill

`Optional`onReady

`Optional`onRowClick

`Optional`onRowCollapse

`Optional`onRowDblClick

`Optional`onRowDrop

`Optional`onRowExpand

`Optional`onRowMouseDown

`Optional`onRowMouseMove

`Optional`onRowMouseOut

`Optional`onRowMouseOver

`Optional`onRowMouseUp

`Optional`onScroll

`Optional`onSelectionChange

`Optional`onSortChange

`Optional`overrideStrict

`Optional`pageSize

`Optional`pagination

`Optional`rangeSelection